1、配置某些包使用CDN
主要借助的是html-webpack-plugin这个插件以及webpack externals这个属性
- 修改vue.config.js
// 对应的版本可以看package.json
const cdnMap = {
css: [],
js: [
'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
'https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
'https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js'
]
}
// 哪些资源
const externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
}
module.exports = {
chainWebpack(config) {
config.externals(externals)
config.plugin('html')
.tap(args => {
args[0].cdn = cdnMap
return args
})
}
}
- 修改index.html
使用的ejs语法，动态遍历出配置文件中的cdn地址
<% if (process.env.NODE_ENV === 'production') { %> <% for(var css of
htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%=css%>" rel="preload" as="style" />
<link rel="stylesheet" href="<%=css%>" as="style" />
<% } %> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
注意:externals这个对象中，key可以取important vue from 'vue'中的这个vue，value可以取外部文件export的文件名
2、使用splitChunks进行代码分割
-
node_modules全部打包成chunk-libs并设置优先级为10 - 将
vantUI单独拆包，设置优先级为20 - 将自己的
comnponents打包成common设置优先级为5
module.exports = {
chainWebpack(config) {
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
vantUI: {
name: 'chunk-vantUI', // split vantUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?vant(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
}
}
可以看一下打包之后的资源：
可以看出将vant与node_modules单独打包成了两个js文件
3.UglifyjsWebpackPlugin压缩代码
可以自行根据环境判断是否需要压缩代码
module.exports = {
chainWebpack(config) {
config.optimization.minimizer = [
new UglifyjsWebpackPlugin({
// 生产环境推荐关闭 sourcemap 防止源码泄漏
// 服务端通过前端发送的行列，根据 sourcemap 转为源文件位置
sourceMap: IS_DEV,
uglifyOptions: {
warnings: false,
compress: {
drop_console: true,
drop_debugger: true
}
}
})
]
}
}
4、开启GZIP优化
主要借助compression-webpack-plugin插件
服务端也要做修改，如果服务端支持GZIP,就发送gzip文件
module.exports = {
chainWebpack(config) {
config
.plugin('compression')
.use(CompressionWebpackPlugin)
.tap(() => [
{
test: /\.js$|\.html$|\.css/, // 匹配文件名
threshold: 10240, // 超过10k进行压缩
deleteOriginalAssets: false // 是否删除源文件
}
])
}
}
5、路由懒加载
将原先静态引入路由修改为动态引入
import Home from '@/view/Home'
routes:[{
path:'/home',
component:Home
}]
修改为
routes:[{
path:'/home',
component:()=>import('@/view/Home)
}]
- 路由组件按组分快打包(见官网)
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
6.CSS是否分离
主要是借助ExtractTextPlugin插件
module.exports = {
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: false,
modules: false,
sourceMap: IS_DEV,
loaderOptions: {
less: {}
}
}
}
为什么要CSS分离，开启CSS分离之后每个组件的css会单独打包，造成页面上有大量请求，所以在正式环境中将CSS分离关闭
关于
这是我在最新的一个项目搭建中遇到的一些优化的点，后期如果还有继续加以补充
完整代码可以看我的项目https://github.com/ahwgs/fast_h5_vue
本文首发于基于Vue-cli3一些常见的优化
