Vue官方的vue-cli一些优化打包方式的配置和方法,懒加载和dll优化方式

简述

我用了官方脚手架 vue-cli,有两个页面ppt_model.vueppt_model1.vue,在两个页面中分别引入了 echarts、jquery
默认会把所有的报都打包到 app.jsvendor.js中。
运行npm run build –report
如下图所示:
在 cmd 中显示打包信息
cmd build
在页面中显示打包信息
html build

懒加载

使用 vue-router 官方推荐的懒加载,基本语法是 component: resolve => require([‘../view/ppt_model.vue’], resolve)
会把每一个页面分开打包成一个 js 文件,当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
参考 > https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
打包如下所示:
在 cmd 中显示打包信息
cmd build
在页面中显示打包信息
html build
其中的static/js/0.66e1ff74acbd166fa927.js对应的是ppt_model.vue页面

static/js/1.f09ddc0b737b2466f148.js对应的是ppt_model1.vue页面

## webpack 官方提供的 DllReferencePlugin

这个插件是在 webpack 主配置文件中设置的, 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。
简单的说,就是把静态的插件库打包到一个静态文件里,同时生成对静态文件引用的 json 文件,通过 webpack 的 DllReferencePlugin 插件实现,打包的优化.
首先创建一个名为webpack.dll.config.js文件,内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var path = require("path");
var webpack = require("webpack");

module.exports = {
entry: {
vendor: ["vue-router", "echarts", "jquery", "vue"]
},
output: {
path: path.join(__dirname, "../static/js"),
filename: "dll.[name].js",
library: "[name]"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "dll", "[name]-manifest.json"),
name: "[name]",
context: path.resolve(__dirname, "client")
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};


在你的项目文件夹目录 cmd 中运行webpack –config ./build/webpack.dll.config.jsbuild中新建了一个dll中有一个vendor-manifest.json和,在static(最外层的 static)中新建一个dll.vendor.js
build文件中webpack.prod.conf.js添加一段代码
在打包前记得在 index.html 最下方,因为打包生成的 js,
1
2
3
4
5
// 记得在plugins中添加
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./dll/vendor-manifest.json")
}),

再运行npm run build –report
运行结果如图所示:
在 cmd 中显示打包信息
cmd build
在页面中显示打包信息
html build

注意
在打包前记得在 index.html 最下方,引入打包生成的 js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dq2.0</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="./static/js/dll.vendor.js"></script>
</body>
</html>

如果报错,请参考 > https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
本地可以预览页面效果,接口是不能调用的,dist 中的 index.html