vue h5项目打包加载优化-编程知识

vue h5项目打包加载优化

打包美化:

1）npx browserslist@latest --update-db 更新去除警告

2）打包进度条

npm add progress-bar-webpack-plugin -D

npm add webpackbar -D

npm install --save-dev webpack-bundle-analyzer

优化：

1.各个插件和loader所花费的时间

npm i speed-measure-webpack-plugin -D 安装打包优化分析插件

得到所有打包文件耗时：

2.添加 cache-loader

基本主要是在cache-loader上比较耗时,提升方法添加cache-laoder

$ npm install cache-loader -D

初次打包时间： 5分钟

优化打包：

开启多线程打包:

npm install --save-dev thread-loader

 config.module.rule('js').use('thread-loader').loader('thread-loader').tap(options => {// 设置 thread-loader 的选项options = {workers: 3}return options})

vue.config.js配置Gzip压缩

npm install --save-dev compression-webpack-plugin

config.plugins.push(//统一配置打包插件new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), //匹配文件名threshold: 10240, //对10K以上的数据进行压缩minRatio: 0.8,deleteOriginalAssets: false //是否删除源文件}))

删除无用css

npm i purgecss-webpack-plugin -D  使用^3.0.0版本

npm i mini-css-extract-plugin -D       使用^0.9.0版本

npm i glob-all -D

打包瘦身：11M=>72kb

图片压缩

vue-cli3压缩图片配置

npm install --save-dev image-webpack-loader

HardSourceWebpackPlugin是webpack的插件

为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）。本地缓存比较严重待验证

第一次构建

第二次打包38s

CDN引入

将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首页展示效果。

(1) 在vue.config.js 加入配置

const externals = {// 属性名称 vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，不去 node_modules 中找，而是去找全局变量 Vue（其他的为VueRouter、Vuex、axios、ELEMENT，注意全局变量是一个确定的值，不能修改为其他值，修改为其他大小写或者其他值会报错）vue: 'Vue','vue-router': 'VueRouter',vuex: 'Vuex',axios: 'axios'
}const cdn = {css: [],js: [//这里CDN地址推荐使用公司私有地址,外部CDN具有很大的不确定性'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js','https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js','https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js','https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js']
}
module.exports = {// ...chainWebpack: config => {if (isProduction) { // 生产环境才注入cdnconfig.plugin('html').tap(args => {args[0].cdn = cdnreturn args})//视为一个外部库，而不将它打包进来config.externals(externals)}}// ...
}

(2) 在public/index.html文件配置

使用webpack中自带的插件 html插件进行配置，在index.html中增加判断，是否使用 CDN，htmlWebpackPlugin.options使用的是vue.config中的config.plugin(‘html’)的插件属性。<% for (var i inhtmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %><link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" /><link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /><% } %><!-- 使用CDN加速的JS文件，配置在vue.config.js下 --><% for (var i inhtmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %><script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %>

3.去除console.log debuger 警告

如果你使用的是 webpack v5 或以上版本，你不需要安装这个插件。webpack v5 自带最新的 terser-webpack-plugin。如果使用 webpack v4，则必须安装 terser-webpack-plugin v4 的版本。如果报错javascript为undefined 因为webpack版本比较低，所以更改terser版本(“terser-webpack-plugin”: “^4.2.3”)

$ npm install terser-webpack-plugin --save-dev

然后将插件添加到你的 webpack 配置文件中。例如：

const TerserPlugin = require("terser-webpack-plugin");module.exports = {optimization: {minimize: true,minimizer: [new TerserPlugin()],},
};

安装前打包前：

安装后打包：

添加优化项：

// vue.config.js
chainWebpack (config) {config.optimization.minimizer('terser').tap((args) => {args[0].parallel = 4args[0].terserOptions.compress.warnings = trueargs[0].terserOptions.compress.drop_debugger = trueargs[0].terserOptions.compress.drop_console = truereturn args})
}