公司的项目是以小程序为空壳，通过小程序原生web-url组件进行页面请求访问，每一次通过服务器build打包后，会造成小程序跳转H5的页面过程中，出现非常大的空白页面等待时间。
针对项目进行了一下优化
1、将一些第三方插件以及vue相关的全家桶采用cdn的形式进行引用
公司项目存在echarts，vue全家桶等插件，配置到cdn
// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
css: [],
js: [
'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
'https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
'https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js'
]
}
module.exports = {
configureWebpack: config => {
// 是否为生产环境
if (isProduction) {
// 生产环境注入cdn
Object.assign(
config.externals, {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios'
})
}
},
chainWebpack: config => {
if (isProduction) {
// 向模板注入cdn
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
}
}
}
html文件读取，webpack下配置的cdn文件
<html>
<head>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<% } %>
</head>
</html>
2、将项目所到的插件，进行按需加载，用于本项目开发用的是vant-ui所以在官网也有相对应的按需加载配置
3、将项目进行按文件打包并压缩代码，引入terser-webpack-plugin模块
由于uglifyjs不支持ES6语法，所以用terser-webpack-plugin代替了uglifyjs-webpack-plugin
npm i terser-webpack-plugin --save
module.exports = {
configureWebpack: config => {
if (isProduction) {
const TerserPlugin = require('terser-webpack-plugin')
let optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
},
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_debugger: true, // console
drop_console: true, // 注释console
pure_funcs: ['console.log'] // 移除console， 必须和上一条同时使用才能去除console
}
}
})]
}
Object.assign(config, {
optimization
})
}
}
}
完成以上的配置后，你的项目dist的包会大大的缩小
接下来我们来减少相对应的网络请求，首先我们先看看，为进行处理的时候，存在的首页请求
接下来我们配置如下信息
module.exports = {
chainWebpack: (config) => {
if (isProduction) {
// 删除预加载
config.plugins.delete('preload');
config.plugins.delete('prefetch');
// 压缩代码
config.optimization.minimize(true);
// 分割代码
config.optimization.splitChunks({
chunks: 'all'
})
}
}
}
进行以上的配置后，我们在一次进行项目打包，然后再进行访问
首页的网络请求只有42，接近少了一倍。我们将一些不是很需要或者不是很急的交互JS页面可以往后读取的时候在进行文件的读取，这样可以加快用户打开首页的速度
下来的配置需要后端运维配合，当然如果你能熟练的操作服务器，那么接下来的配置也可以单独处理
进入nginx.conf配置文件，启动gzip访问，相关配置如下
gzip on; #是否开启
gzip_min_length 1k; #最小压缩临界值, 一般不改
gzip_buffers 4 16k; #设置用于处理请求压缩的缓冲区数量和大小，建议为默认值
gzip_comp_level 2; # 压缩级别，等级越好CPU占用越好，压缩质量越好
#压缩类型
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
然后安装compressisonPlugin插件
npm i compression-webpack-plugin --save
chainWebpack: (config) => {
if (isProduction) {
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
test: /\.js$|\.html$|.\css/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
}))
}
}
这样就可以愉快的加快我们项目的访问速度了
我是godlike，每周一篇小技巧，一起快速入坑，希望能在前端道路上，和你努力，一起共勉！
