-
前端开发完项目之后,会进行打包,就会涉及到性能优化(比如vue中首页白屏太久等)问题,想要进行性能优化,首先要知道哪里可以进行优化,可以借助工具帮助分析文件哪里可以进行优化:
-
可视化分析包大小
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
在vue.config.js中配置:
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
这时候需要注意了,如果你给自己的应用在开发环境设置了默认的端口号8888,如下:
就会引起冲突,因为默认的文件分析大小端口号就是8888,
运行:
yarn serve
我这里配置了会自动打开两个窗口:
- http://127.0.0.1:8888/ 可以看到直接打包后的文件大小可视化图,性能优化的地方可以从这里入手,比如element-ui,在这里我是使用了按需加载,会比较小,如果没有按需加载的话,可以进行优化处理一下,但是这里边的代码并不多,仍然1.29M,所以可以进行优化一下。
- 我写是一个增删改操作(后续代码可以分享)
- 关掉map:线上报错时定位到代码位置,可以关掉
vue.config.js
module.exports = {
productionSourceMap: false
}
- simple-progress-webpack-plugin:用来查看打包进度
cnpm install ghost-progress-webpack-plugin -D
如下图:
module.exports = {
configureWebpack: {
plugins: [
// 开启打包进度
new SimpleProgressWebpackPlugin()
]
}
}
- compression-webpack-plugin: 压缩代码
cnpm install compression-webpack-plugin --save-dev
这是我原来的文件大小:
开启压缩后:
打包后运行dist文件(需要开启服务,图片的路径也要改一下)就可以看到效果
没压缩时(本地运行):
ETag: 只是代表网络资源的一个标识,初次请求,状态码200,再次刷新请求,如果文件没有发生改变,状态码304,可以用来减少带宽。看到有人解释加上W/ 就是压缩后,我当时信了,其实并不是, 详情可了解HTTP 中文开发手册
按需要引入
babel.config.js(之前都是手动创建.babelrc文件,现在的话,创建项目就会自动生成这个文件,按需引入的配置可以放在这里)
module.exports = {
"presets": [
"@vue/app"
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}
main.ts(最近在学习typescript,就加入了)
import { Button, Select, Dialog } from 'element-ui';
Vue.use(Button);
Vue.use(Select);
Vue.use(Dialog);
多线程:提高打包速度
先看看效果,这是没有开启之前打包需要花费的时间
加入之后,加快了打包的效率:
安装:
cnpm install happypack -D
使用:
const HappyPack = require('happypack')
module.exports = {
chainWebpack: config => {
// 多线程
config.plugin('HappyPack').use(HappyPack, [
{
loaders: [
{
loader: 'babel-loader?cacheDirectory=true'
}
]
}
])
}
}
小提示:
- –save-dev : 保存到 package.json 的 devDependencies 依赖中,缩写:-D (开发环境)
- –save : 保存到 package.json 的 dependencies 依赖中, 缩写 : -S (生产环境)
虽然上述的操作已经把代码整体优化了很多,但仍然还可以进行优化,比如代码切割、懒加载、雪碧图(个人不是很看好这个,哈哈哈)、webp(这个很值得引入)等等。后续会持续更新补充。