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

优化 Vue 项目的打包速度

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

// 开发环境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

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.jsonvendor.dll.js, 前者是库文件的 node_modle 路径和 webpack 打包 id 的映射。 后者是打包后的代码库。

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

这里值得一提的是, 虽然我们可以直接在根目录的 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 文件进去也是没有用的。
本文章参考博客地址:链接地址

  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    204 引用 • 625 回帖 • 534 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1250 引用 • 9447 回帖 • 621 关注

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...