默认情况下,通过
import
语法导入的第三方依赖包,最终会被打包合并到同一个文件(js/chunk-vendors.******.js
)中,从而导致打包后单文件体积过大的问题。
一、如何解决上述问题
可以通过webpack
的externals
节点,来配置并加载外部的CDN
资源,凡是声明在externals
中的第三方依赖包,最终都不会被打包。通过排除这些包减小js/chunk-vendors.******.js
文件体积。
原理:打包期间,webpack
会先检查externals
中是否声明第三方依赖包,如果有,则webpack
不会把对应的依赖包打包到js/chunk-vendors.******.js
中,而是在用到包的时候去window
全局去寻找这个对象
二、具体步骤:
1. 先在vue.config.js
中添加externals
设置排除项
module.exports = {
chainWebpack:config=>{
//发布模式
config.when(process.env.NODE_ENV === 'production',config=>{
//entry找到默认的打包入口,调用clear则是删除默认的打包入口
//add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
//使用externals设置排除项
config.set('externals',{
vue:'Vue',
'vue-router':'VueRouter',
axios:'axios',
lodash:'_',
echarts:'echarts',
nprogress:'NProgress',
'vue-quill-editor':'VueQuillEditor'
})
})
//开发模式
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
2. 添加externals
排除的CDN资源
- 在main-prod.js中,删除
externals
排除的依赖包对应的样式(css) - 在public/index.html文件的头部,添加对应的js、css
福利:这里提供一个开源CDN加速服务 bootcdn
温馨提示:添加的js、css需要与pack.json文件中对应包的版本相同
3. 对比通过externals
打包前后代码的体积。
很明显,通过externals
打包后的代码体积更小。
4. ElementUI
优化
ElementUI中的组件,也通过CDN的形式来加载,这样能进一步减小打包后的文件体积。
- 在main-prod.js中,注释掉element-ui的js和css
- 在index.html的头部区域,通过CDN加载element-ui的js和css