插件地址:https://github.com/shirotech/webpack-cdn-plugin
具体的使用如下:
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来源 // 由于 jsdelivr 已无法访问,使用默认的 unpkg 即可!!!
prod: true,
// 如果为 true,则从 CDN 加载,如果为 false,则从本地的 publicPath 下加载。
//prod: process.env.NODE_ENV === 'production' 可以考虑设置成这样。
})]
// ...
};
由于本地开发时一般希望从 node_modules 加载资源,所以可以考虑以下使用方式:
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://wp.cmyr.ltd/archives/vue-use-of-project-packaging-optimization-cdn
- 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
欢迎关注我的其它发布渠道
发表回复
要发表评论,您必须先登录。