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>