vue中webpack打包優化 dll

背景

項目打包後的體積過大，擷取的時候速度慢，導緻首屏加載有些慢；

這裡用到webpack中的 将指定庫檔案提取，打包成指定檔案名，這樣做的目的是可以減少重複打包，固定的類庫采用固定的檔案夾打包，使得浏覽器再下次擷取的時候可以緩存，取代之前的hash檔案命名的方式。

實作

1.在package.json檔案中 寫入dll

"scripts": {

        "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
    },
           

2.建立檔案夾 webpack.dll.conf.js，和src同級

const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')

// dll檔案存放的目錄
const dllPath = 'public/vendor'

module.exports = {
  entry: {
    // 需要提取的庫檔案
    vendor: ['vue', 'vue-router', 'vuex', 'axios'],
    toast: ['@toast-ui/editor'],
    tinymce: ['tinymce'],
    dateset: ['@antv/data-set'],
    antd: ['ant-design-vue'],
    jeecg: ['@jeecg/antd-online-mini']
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: '[name].dll.js',
    // vendor.dll.js中暴露出的全局變量名
    // 保持與 webpack.DllPlugin 中名稱一緻
    library: '[name]_[hash]'
  },
  plugins: [
    // 清除之前的dll檔案
    new CleanWebpackPlugin(['*.*'], {
      root: path.join(__dirname, dllPath)
    }),
    // 設定環境變量
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: "'production'"
      }
    }),
    // manifest.json 描述動态連結庫包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      // 保持與 output.library 中名稱一緻
      name: '[name]_[hash]',
      context: process.cwd()
    })
  ]
}
           

3.執行npm run all 就可以看到打包後的js檔案，都以相應的檔案夾，儲存在vendor檔案夾中。

4.最後在index.html中手動引入這幾個檔案

<script src="/vendor/vendor.dll.js" preload></script>
    <script src="/vendor/antd.dll.js" preload></script>
    <script src="/vendor/tinymce.dll.js" preload></script>
    <script src="/vendor/dateset.dll.js" preload></script>
    <script src="/vendor/toast.dll.js" preload></script>
    <script src="/vendor/jeecg.dll.js" preload></script>