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一些常见的优化
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。