提升 webpack 构建 Vue 项目的速度

时间 2019-11-06

标签提升 webpack 构建 vue 项目速度繁體版

原文原文链接

前言

最近有人给个人 Vue2 后台管理系统解决方案提了 issue ，说执行 npm run build 构建项目的时候极其慢，而后就引发个人注意了。在项目中，引入了比较多的第三方库，致使项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了很多时间。因此，把这些不常变更的第三方库都提取出来，下次 build 的时候再也不构建这些库，这样既可大大缩短构建时间。那么要怎么去实现呢？javascript

解决方案

DllPlugin 和 DllReferencePlugin

查找了一下资料，发现咱们能够利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 来实现咱们要的功能。html

DllPlugin 能够把咱们须要打包的第三方库打包成一个 js 文件和一个 json 文件，这个 json 文件中会映射每一个打包的模块地址和 id，DllReferencePlugin 经过读取这个json文件来使用打包的这些模块。vue

接下来就看如何实现。java

配置文件

在 build 文件夹中新建 webpack.dll.config.js (项目基于 vue-cli 的)node

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios','vue-echarts-v3']
  },
  output: {
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'       // vendor.dll.js中暴露出的全局变量名
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};复制代码

而后在 package.json 中配置命令webpack

"scripts": {
    ...
    "build:dll": "webpack --config build/webpack.dll.conf.js"
}复制代码

执行 npm run build:dll 命令来生成 vendor.dll.js 和 vendor-manifest.jsonios

须要在 index.html 引入 vendor.dll.jsgit

<body>
    <div id="app"></div>
    <script src="./static/js/vendor.dll.js"></script>
</body>复制代码

vendor-manifest.json 的内容大概以下：github

{
  "name": "vendor_library",
  "content": {
    "./node_modules/core-js/modules/_export.js": {
      "id": 0,
      "meta": {}
    },
    ...
}复制代码

接下来就在 webpack.base.config.js 中经过 DLLReferencePlugin 来使用 DllPlugin 生成的 DLL Bundleweb

var webpack = require('webpack');

module.exports = {
    entry: {
        app: ['./src/main.js']
    },
    module: {
        ...
    }
    // 添加DllReferencePlugin插件
    plugins: [
        new webpack.DllReferencePlugin({
            context: path.resolve(__dirname, '..'),
            manifest: require('./vendor-manifest.json')
        }),
    ]
}复制代码

原先 build 须要 95446ms，配置以后执行 build 只需 14360ms，减小了 75% 的时间。

可是存在一个问题，当把太多的第三方依赖都打包到 vendor.dll.js 中去，该文件太大也会影响首屏加载时间。因此要权衡利弊，能够异步加载的插件就没有必要打包进来了，不要一味的把全部都打包到这里面来获取构建时的快感。

提升 webpack 构建 Vue 项目的速度

前言

解决方案

DllPlugin 和 DllReferencePlugin

配置文件

示例地址：vue-manage-system

我的博客：lin-xin/blog