0%

2020-12-15 vue 项目打包优化之使用 CDN

vue 项目打包优化之使用 CDN

插件地址:https://github.com/shirotech/webpack-cdn-plugin

具体的使用如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const WebpackCdnPlugin = require('webpack-cdn-plugin');
module.exports = {
// ...
plugins: [new HtmlWebpackPlugin(), new WebpackCdnPlugin({
modules: [{
name: 'vue', // 包名称
var: 'Vue', // 导出的变量名称
path: 'dist/vue.runtime.min.js' //相对包的根路径,这个路径可以从 CDN 网站上看到
},
{
name: 'vue-router',
var: 'VueRouter',
path: 'dist/vue-router.min.js'
},
{
name: 'vuex',
var: 'Vuex',
path: 'dist/vuex.min.js'
},
{
name: 'normalize.css',
style: 'normalize.min.css',
cssOnly: true, //如果是纯 css 包需要设置这个,否则报错
}],
publicPath: '/node_modules',
prodUrl: 'https://cdn.jsdelivr.net/npm/:name@:version/:path', //个人喜欢jsdelivr作为cdn,这里自定义cdn来源
prod: true,
// 如果为 true,则从 CDN 加载,如果为 false,则从本地的 publicPath 下加载。
//prod: process.env.NODE_ENV === 'production' 可以考虑设置成这样。
})]
// ...
};

由于本地开发时一般希望从 node_modules 加载资源,所以可以考虑以下使用方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const jsModules = [{
name: 'lodash',
var: '_',
path: 'lodash.min.js',
},
{
name: 'axios',
var: 'axios',
path: 'dist/axios.min.js',
},
{
name: 'dayjs',
var: 'dayjs',
path: 'dayjs.min.js',
}]
// ....
new WebpackCdnPlugin({
publicPath: '/node_modules',
prod: true,
modules: process.env.NODE_ENV === 'production' ? jsModules: [],
// 仅生产环境使用 CDN ,开发时从本地加载
}),

另外提个小 bug 吧,也算是踩了个坑。

本项目中,我使用了 vuetify 作为 UI 框架,但是由于全量导入的话,包体积太大,因此考虑放到 cdn 上。但是我在设置了 externals 选项后依旧无效,经过排查,才发现是 vuetify-loader 的锅。这个插件的作用是对 vuetify 进行摇树优化,而摇树的结果就是 webpack 不认得 externals 选项了,因此卸载之后解决问题。

最后,解决方案有两个:1.如果要使用 cdn,则不选择摇树优化,移除 vuetify-loader 插件;2.如果要摇树优化,则安装 vuetify-loader 插件,不过会导致包体积大很多。根据之前的测试,js部分略有所缩小, css部分大的离谱……

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/1db47d2d.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!