如何优化 Vue 项目的打包速度

优化 Vue 项目的打包速度

随着项目依赖的增加, 在配合开发的时候听到后端同学的抱怨 build 时间长, 及其影响开发效率和心情. 然后翻阅了相关的资料开启 Vue 优化之路。
此项目是针对 vue-cli2 脚手架进行优化的

• 项目依赖管理
  首先检查一下依赖, 去掉对项目没用的依赖, 然后注意开发依赖跟生产依赖不能弄混. 如 scss, scss-loader 要放在开发依赖中, 因为编译后就不需要了。

• 优化配置
  修改 config/index.js 下的文件

// 开发环境dev下, 设置为`eval`能提高最快速度, 但是缺点是不能正确显示行号, Debug会有点影响
devtool: 'eval'
// 关闭生产环境的sourceMap, 不懂是啥的话可以看下面的文章
// 阮一峰 - JavaScript Source Map 详解(http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html)

productionSourceMap: false
​

** 在 src/mian.js 关闭生产环境下的调试信息**

const isDebugMode = process.env.NODE_ENV !== "production";
Vue.config.debug = isDebugMode;
Vue.config.devtools = isDebugMode;
Vue.config.productionTip = isDebugMode;
​

启动 DllPlugin

• 在 build 文件夹中新增 webpac.dll.config.js 的 js 文件. 我们将第三方库抽取出来, 打包 dll 代码.

const path = require("path");
const webpack = require("webpack");
// 抽取第三方库
const vendors = [
      "vue/dist/vue.common.js",
      "vue-router",
      "babel-polyfill",
      "axios",
      "element-ui",
      "mint-ui"
]
module.exports = {
  entry: {
    vendor: vendors
  },
  output: {
    path: path.join(__dirname, "../static/js"),
    filename: "[name].dll.js",
    library: "[name]_[hash]" // vendor.dll.js中暴露出的全局变量名
  },
  plugins: [
    new webpack.DllPlugin({
    path: path.join(__dirname, ".", "[name]-manifest.json"),
      // 此处需要和 output.library 的值一致
      name: "[name]_[hash]",
      context: __dirname
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};
​

然后再写一个快捷的调用方式, 在 package.json 的 script 上添加一行代码:

{
  "scripts": {
    ...此处省略其他代码
    "dll": "webpack --config ./build/webpack.dll.config.js"
  }
}
​

然后直接在命令行使用 npm run dll, 生成 vendor-manifest.json 和 vendor.dll.js, 前者是库文件的 node_modle 路径和 webpack 打包 id 的映射. 后者是打包后的代码库。

• 然后再安装 html-webpack-include-assets-plugin 和 copy-webpack-plugin 这两个插件.

npm install --save-dev html-webpack-include-assets-plugin copy-webpack-plugin
​

• copy-webpack-plugin 是因为项目的需要，需要 copy 到指定的目录下.
• html-webpack-include-assets-plugin 是将 vendor.dll.js 插入到 index.html 里.

这里值得一提的是, 虽然我们可以直接在根目录的 index.html 里插入 script, 但实际上并不妥当的. 当你 npm run dev 后, 你会发现在控制台那一行红色的报错, 告诉着你东西找不到, 虽然不影响开发, 但你会看得很难受.

紧接着在 webpack.prod.conf.js 上引用我们添加的依赖, 再添加以下代码

// config 是 config/index.js 里的配置
// utils.assetsPath 也是 build/utils.js的配置
// 这里这样写是为了跟项目统一
plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./vendor-manifest.json')
  }),
  // copy custom static assets
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }
  ]),
  // 将 vendor.dll.js 插入HTML里
  new HtmlWebpackIncludeAssetsPlugin({
    assets: [utils.assetsPath('js/vendor.dll.js')],
    files: ['index.html'],
    append: false
  }),
]
​

在命令行进行打包 npm run build, 可以看到构建的速度大大的提高啦.
根据我的实测，由原来的 3 分钟到 1 分钟，确实节省了很多的时间。

最后再优化时说说踩的坑, 给后来人一些提示.
Uncaught ReferenceError: vendor_library is not defined - 检查 HTML 里是否插入 vendor.dll.js, 文件是否加载成功, 或者检查是否有路径问题.
一些打包后 hash 不变仍然会被清除重新打包 … 这是因为 vue-cli 默认配置会直接清空 dist 文件夹里的所有文件, 你提前放一些 js 文件进去也是没有用的.
本文章参考博客地址：链接地址