vue 的优化总结之cdn优化(webpack.dll优化)

vue 的优化总结之cdn优化(webpack.dll优化)_第1张图片

 

目录

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

1.1 cdn引入各种包

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

vue-cli2

 vue-cli3

 2.dll优化:

2.1 新建dll.js文件

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

 2.3 在package.json中添加指令("dll": "webpack --config build/webpack.dll.js")

 2.4 在index.html中引入文件

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


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/

vue 的优化总结之cdn优化(webpack.dll优化)_第2张图片

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

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

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

vue-cli2

vue 的优化总结之cdn优化(webpack.dll优化)_第3张图片

 vue-cli3

vue 的优化总结之cdn优化(webpack.dll优化)_第4张图片

 

 

补充几点: 

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

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

·   vue.js一定要先引入

 

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

vue 的优化总结之cdn优化(webpack.dll优化)_第5张图片

 

 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代码

vue 的优化总结之cdn优化(webpack.dll优化)_第6张图片

 2.3 在package.json中添加指令("dll": "webpack --config build/webpack.dll.js")

vue 的优化总结之cdn优化(webpack.dll优化)_第7张图片

 

此时运行 npm run dll (static/js文件夹下会生成两个文件):

vue 的优化总结之cdn优化(webpack.dll优化)_第8张图片

 2.4 在index.html中引入文件

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

你可能感兴趣的:(Vue,vue,js)