使用vue-cli生成的vendor.js文件太大

通过webpack打包后我们会发现vendor.js会非常大，而且打包也会很慢，因为把依赖库里面的资源都打包到vendor.js里了，而且每次打包都会去重新编译。而我们现在用DllPlugin和DllReferencePlugin主要是把我们引用的依赖库提取出来到static,下次需要时直接去static提取到dist，无需重新编译，只需要更新我们修改过的js即可。

首先新建一个build/webpack.dll.conf.js

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    //填写需要提取出来的依赖包
    //如果有些依赖包在index.html页面引入了cdn了就无需再引入了，否则会打包进js文件中，在页面重复引入代码。
    vendor: ['vue','vue-router']
  },
  output: {
    path: path.join(__dirname, '../static'),
    filename: 'dll.[name].js',
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '../', '[name]-manifest.json'),
      name: '[name]'
    })
  ]
}

在package.json 下配置

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

通过npm run dll 就可以在根目录下生成vendor-manifest.json,static下生成dll.vendor.js

接下来通过webpack.base.conf.js 下引入

const manifest = require('../vendor-manifest.json')

....

plugins: [
   //把dll的vendor-manifest.json引用到需要的预编译的依赖
   new webpack.DllReferencePlugin({
     manifest
   })
]

我们在index.html，在底部加上<script src="./static/dll.vendor.js"></script> 就可以了

=> 优化（防止编译后的文件缓存，同时能够自动在index.html中引用）

assets-webpack-plugin
使用Webpack时，您可能想要生成包含生成哈希的包（用于缓存清除）。该插件会输出一个带有生成资源路径的json文件，以便您可以从其他位置找到它们。

安装:

npm install assets-webpack-plugin –save-dev

在build/webpack.dll.conf.js 导出的文件文件加上hash

const path = require('path')
const webpack = require('webpack')
const package = require('../package.json')
const AssetsPlugin = require('assets-webpack-plugin')
module.exports = {
  entry: {
    //读取package.json里的依赖，normalize.css除外，打包会报错
    //如果使用了chrome的vue-devtool，那打包的时候把vue也排除掉，因为压缩过的vue是不能使用vue-devtool的
    vendor: Object.keys(package.dependencies).filter((item) => {
      return item.indexOf('normalize') < 0 && item != 'vue'
    })
  },
  output: {
    path: path.join(__dirname, '../static'),
    filename: 'dll.[name]_[hash:6].js',
    library: '[name]_[hash:6]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '../', '[name]-manifest.json'),
      name: '[name]_[hash:6]'
    }),
    new AssetsPlugin({
      filename: 'bundle-config.json',
      path: './'
    })
  ]
}

在webpack.dev.conf.js ：

const bundleConfig = require("../bundle-config.json")

...

plugins: [
    new HtmlWebpackPlugin({
      // 加载dll文件
      vendorJsName: bundleConfig.vendor.js,
    }),
  ]

在webpack.prod.conf.js ：

const bundleConfig = require("../bundle-config.json")

...

plugins: [
    new HtmlWebpackPlugin({
      // 加载dll文件
      vendorJsName: bundleConfig.vendor.js,
    }),
  ]

最后在index.html

 <script src="./static/<%= htmlWebpackPlugin.options.vendorJsName %>"></script>

其中HtmlWebpackPlugin 支持ejs模板语法。

参考：

使用vue-cli生成的vendor.js文件太大

猜你喜欢