美文网首页前端开发
vue打包的vendor过大处理

vue打包的vendor过大处理

作者: 小程序前端超市 | 来源:发表于2019-04-20 16:36 被阅读1次

通过webpack打包后我们会发现vendor.js会非常大,而且打包也会很慢,因为把依赖库里面的资源都打包到vendor.js里了,而且每次打包都会去重新编译。而我们现在用DllPluginDllReferencePlugin主要是把我们引用的依赖库提取出到static

1、创建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]'
    })
  ]
}

2、在package.json 下配置

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

3、生成文件

通过

npm run dll

生成

  1. 根目录下生成vendor-manifest.json
  2. static下生成dll.vendor.js

4、在webpack.base.conf.js 下引入

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

....

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

5、在index.html底部加上

<script src="./static/dll.vendor.js"></script>

就可以了

参考链接:

相关文章

网友评论

    本文标题:vue打包的vendor过大处理

    本文链接:https://www.haomeiwen.com/subject/bvdlgqtx.html