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

 

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

 

1.CDN优化(vue-cli3同样适用)

 

 

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

1.1 cdn引入各种包

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

 1.2 配置webpack.base.conf.js（vue-cli3的话写在vue.config.js文件中）

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

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

vue-cli2

 vue-cli3

 

 

补充几点: 

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

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

·   vue.js一定要先引入

 

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

 

 2.dll优化：

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

2.1 新建dll.js文件

在Vue-cli2搭建的项目中，在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 就可以了

 

附上：

非网络引用element-ui css导致图标无法正常显示的解决办法

fonts文件下载地址：https://unpkg.com/element-ui@2.10.1/lib/theme-chalk/fonts/