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

像风一样的女孩

于 2018-05-15 17:42:22 发布

阅读量1.5w

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/blueberry_liang/article/details/80320607

版权

本文介绍了如何使用Vue CLI时通过DllPlugin和DllReferencePlugin来优化vendor.js文件，避免每次打包时重复编译依赖库。通过创建Dll配置，将依赖库打包到static目录，仅更新改动的js文件，提高打包效率。此外，还提到了assets-webpack-plugin用于生成哈希命名的资源文件，便于缓存管理和自动引用。

摘要由CSDN通过智能技术生成

通过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]'
    })
  ]
}