Vue 优化总结之cdn优化，webpack.dll优化(附详细操作)

vue 项目打包后vendor.js过大，导致打包速度慢，首页加载慢。原因是第三方库比如（vue，vue-router，axios）都会打包在vendor.js文件里面，下面给出两种解决方案：

1.CDN优化

cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：

1.1 cdn引入各种包

在index.html中把你用到的资源通过cdn引入，资源寻找链接：https://www.bootcdn.cn/

 1.2 配置webpack.base.conf.js

下面的externals对象的属性名为package.json中对应的库的名称（固定写法）,

属性值为引入时你自定义的名称（不固定，除了ELEMENT,ELEMENT是固定的写法）

1.3 去掉引入（这个地方要注意，凡是import vue的全部要去掉）

vuex:

router：

 new 后面的名称要和上文提到的externals对象里对应的属性值一样

axios:

 element-ui:

补充几点: 

 · ELEMENT是element-ui属性值的固定写法,其他的externals对象的属性值必须和你自定义的名称一样；

 · 最好把cdn每个文件的版本号改成你package.json中的对应版本号；

 · 如果担心cdn不稳定可以加入代码让cdn没读取成功时加载本地资源（参考链接：https://blog.csdn.net/yangfeixien/article/details/88741492）：

 2.dll优化：

dll优化是把第三方库单独提取出来，而不是放在vendor.js里面，和cdn的区别是它们存在本地，比较稳定。

2.1 新建dll.js文件

在Vue-cli3搭建的项目中，在build文件夹下新建webpack.dll.js文件。

const path = require(‘path‘);
const webpack = require(‘webpack‘);
module.exports = {
  entry: {
    vendor: [‘vue/dist/vue.esm‘, ‘vue-router‘, ‘axios‘] //这里把vue,vue-router,axios提取出来，可以再添加
  },
  output: {
    path: path.join(__dirname, ‘../static/js‘),
    filename: ‘[name].dll.js‘,
    library: "[name]_library" //这个名称和下面的name值必须一样
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, "../static/js/vendor-manifest.json"),
      name: "[name]_library" //这个名称和上面的library值必须一样
    })
  ]
}

2.2 在webpack.prod.conf.js中添加dll代码

 3.3 在package.json中添加指令（"dll": "webpack --config build/webpack.dll.js"）

此时运行 npm run dll （static/js文件夹下会生成两个文件）：

 3.4 在index.html中引入文件

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

3.5 此时已全部完成，以后只需要npm run build 就可以了

Vue 优化总结之cdn优化，webpack.dll优化(附详细操作)

原文：https://www.cnblogs.com/wiliam/p/12587893.html