提升 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')
        }),
    ]
}複製代碼