web派

vue-cli3 配合CDN优化打包编译

vue-cli3 配合CDN优化打包编译

vue在build以后,经常会发现打包内容特别大。

例如,一个全套的element-ui,光是JS内容部分,就差不多600k。

但是将element-ui使用CDN加载以后,就可以缩小打包大小。

引入CDN地址,只需要在public/index.html中引入对应的cdn脚本与样式即可。

但还需要在打包工具中忽略对应的内容包。

一般开发的vue时,多数基于webpack打包编译。

在vue cli中,没有直接的webpack配置文件,一般时通过vue.config.js进行配置。

webpack的配置字段,configureWebpack。

在这个字段中添加一项,externals。

例如配选element-ui

configureWebpack: {
    externals: {
        'element-ui': 'ElementUI',
    },
},

当然,不只是element-ui,其中vue/vuex/vue-router/axios这些都可以进行CDN加载,打包忽略。

这样,我们的生产包中,基本上就只是项目内容的代码。

小蚂蚁
呵呵
2020-04-08 21:41:51
1楼
小程序码

如需参与评论或查看更多留言,请微信扫一扫

小程序码