优化Vue项目的构建速度

随着项目依赖的增加, 在配合开发的时候听到后端同学的抱怨 build 时间长, 及其影响开发效率和心情. 然后翻阅了相关的资料开启Vue优化之路~

项目依赖管理

首先检查一下依赖, 去掉对项目没用的依赖, 然后注意开发依赖跟生产依赖不能弄混. 如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": {
    // other code...
    "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这两个插件.

1	npm insatll --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, 可以看到构建的速度大大的提高啦, 我们的优化也告一段落了~

后记

最后再优化时说说踩的坑, 给后来人一些提示.

Uncaught ReferenceError: vendor_library is not defined - 检查HTML里是否插入vendor.dll.js, 文件是否加载成功, 或者检查是否有路径问题.

一些打包后hash不变仍然会被清除重新打包 … 这是因为vue-cli默认配置会直接清空dist文件夹里的所有文件, 你提前放一些js文件进去也是没有用的.