vue 項目打包優化（遠不止dll）

背景

我們在使用cli創建項目，完成開發后，在項目打包通常會發現很慢。為了優化打包速度，我們可以使用Dll來做這個優化，也可以使用hard-source-webpack-plugin，還可以用thread-loader。

這里我們主要講Dll，Dll不僅可以在cli的項目中使用，我們也可以單獨建立一個webpack文件來進行處理。

 

正文

Step1 我們先創建webpack.dll.js文件,代碼如下：

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
  // 自己項目使用的第三方庫
    vendor: ['lodash', 'axios', 'vue-router', 'element-ui', 'vue/dist/vue.esm.js']
  },
  output: {
    // 打包后輸入路徑，可以自行修改
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      // Tips: DllPlugin的name屬性需要和libary保持一致
      name: '[name]_[hash]',
      //指定當前目錄
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      // context需要和webpack.config.js保持一致
      context: __dirname
    })
  ]
}

 

Step2 我們需要下載webpack-cli來運行我們的webpack.dll.js

npm install webpack-cli
//查看webpack版本號 webpack -v是無用的
npm info webpack
//Tips: ./webpack.dll.js 路徑要寫對
//只能在package.json文件的scripts配置"dll": "webpack --config ./webpack.dll.js"
//運行文件
npm run build:dll

package.json增加配置如下

{
  "scripts": {
    "build:dll": "webpack --config ./webpack.dll.js",
  },
}

 

 

 

當我們在package.json文件配好，然后運行命令后，會打包生成vendor-manifest.json文件

 

Step3 在項目中引入我們打包后的json文件

現在已經把第三方的包打包好了，接下來只需要在我們項目中注入即可。

方式有兩種：

vue.config.js配置

const webpack = require('webpack')

module.exports = {
    //二者選其一即可
    chainWebpack: config => {
      config.plugin('dll-reference-plugin')
         .use(webpack.DllReferencePlugin)
         .tap(options => {
           options[0] = {
             context: __dirname,
             // manifest就是我們第2步中打包出來的json文件
             manifest: require(path.join(__dirname, `./vendor-manifest.json`))
           }
           return options
         })
    },
    configureWebpack: config => {
      config.plugins.push(new webpack.DllReferencePlugin({
        context: __dirname,
        // manifest就是我們第2步中打包出來的json文件
        manifest: require('./vendor-manifest.json')
      }))
    }
}

 

webpack.config.js配置

const path = require('path');
const webpack = require('webpack')
module.exports = {
  // dll相關配置
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest就是我們之前打包出來的json文件
      manifest: require('./vendor-manifest.json'),
    })
  ]
}

 

當我們再次打包我們的項目，你會發現打包速度有很明顯的改進。

 

結語

   除了上面講的一種優化方案，我們還可以使用hard-source-webpack-plugin來做這方面的優化，步驟如下：

1.安裝

npm install --save-dev hard-source-webpack-plugin 

2.在配置文件使用

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
  // ......  plugins: [
    new HardSourceWebpackPlugin()  
]}

 

     最后的最后，其實我們還可以使用多進程打包thread-loader。請自行前往學習

 

  給朋友們推薦一個前端公眾號，里面都是前端技術干貨。