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

发表于 | 分类于 | 阅读次数
在使用了Vue官方的vue-cli时，使用dll优化打包过程，也可以用懒加载来优化

简述

我用了官方脚手架 vue-cli，有两个页面ppt_model.vue和 ppt_model1.vue,在两个页面中分别引入了 echarts、jquery
他默认会把所有的报都打包到 app.js和vendor.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.js在build中新建了一个dll中有一个vendor-manifest.json和，在static(最外层的 static)中新建一个dll.vendor.js。
在build文件中webpack.prod.conf.js添加一段代码
在打包前记得在 index.html 最下方，因为打包生成的 js,<script src="./static/js/dll.vendor.js"></script>

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>

参考

webpack dll
本地可以预览页面效果，接口是不能调用的，dist 中的 index.html