一、前言
阅读完该文章大概需要2.5min。
读完该篇文章你能学到
vue-cli
默认做了哪些优化?- 在cli的基础上我们又能做哪些优化?
vue.config.js
中如何配置一些常用的plugin
和loader
vue-cli
的出现,让我们省掉了配置webpack的时间。也就是说,一个不懂webpack的人,也能直接上手开发。比如file-loader
,url-loader
会提前为我们配置好。性能方面,
vue-cli
也默认尽可能多的帮我们做了优化,比如cache-loader会在项目中预先做了配置。我们可以在控制台输入vue inspect > webpack.config.js
,即可在webpack.config.js文件中查看cli预先定义好的基础配置。我们今天就在vue-cli搭建好的项目基础上聊一聊可优化的点。
二、项目源码
本文所用到的项目源码
三、量化指标
1. build时间
speed-measure-webpack-plugin
插件可以在build的时候看到webpack的loader和plugin所用的时间,配置非常简单。如下:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('speed')
.use(SpeedMeasureWebpackPlugin)
}
}
顺便看一下效果
2.build后包的大小以及包的多少
webpack-bundle-analyzer
插件可以帮我们可视化的展示build时的每个包的大小以及依赖。vue-cli也帮我们做了默认的配置,我只需要在build的后面加一个参数–report即可。
// package.json
{
"name": "dll-vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report",
}
}
npm run report
之后,dist目录下就多了一个report.html文件,我们用浏览器打开这个文件看一下,右上角那个小蓝块是我们的vue代码,接下来我们主要来优化小蓝块之外的代码
四、开始优化
1. include/exclude
我们通常配置include和exclude,来达到使loader仅仅处理匹配到的文件,像这样
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js[x]?$/,
use: ['babel-loader'],
include: [path.resolve(__dirname, 'src')]
}
]
}