1、配置 webpack-bundle-analyzer 插件
2、分析
2.1、路由懒加载
把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。
import Login from '@/components/login/index'
{ path: 'login', name: 'Login', component: Login }
修改为
{ path: '/login', component: () => import('@/components/login/index')}
以函数的形式动态引入，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会下载路由组件
vue cli 3 默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态
import()按需 code splitting 的产物) 自动生成 prefetch 提示。
引入路由懒加载也会一次全部加载，所以我们需要关闭prefetch
官方文档例子如下，我再项目中配置不起作用。
// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 或者
// 修改它的选项：
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
打印chainWebpack，发现用的是prefetch-index，项目应用如下，完美解决！
chainWebpack: (config) => {
// console.log(config,'chainWebpack')
config.plugins.delete('prefetch-index');
// 'html-index' => [Object],
// 'preload-index' => [Object],
// 'prefetch-index' => [Object],
// config.plugins.delete('preload-index');
},
如果想提前加载那个界面可以配置
component: () => import(/* webpackChunkName: "setting",webpackPrefetch: true */'../component/login/setting')
2.2 优化moment.js
2.2.1方法1
默认多语言都会加载，选择需要的语言进行加载。
vue.confgi.js
configureWebpack: config => {
//忽略/moment/locale下的所有文件
config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
}
//设定moment区域为中国
import 'moment/locale/zh-cn';
2.2.1方法2
moment 也被替换为了date-fns
2.2productionSourceMap 配置
Type: boolean
Default: true
如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
看打包文件会多一个.map 文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
2.3Echarts 打包文件过大
2.3.1方法1按需要引入
创建一个echarts.js文件
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/radar'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/funnel'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/axisPointer'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markArea'
import 'echarts/lib/component/geo'
export default echarts
然后再到需要引用echarts的页面写上如下代码 进行引入
import echarts from '../echarts';
4.使用CDN加载
- 在index.html中引入cdn资源
<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
- 在vue.config.js配置
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex',
'vue-resource': 'VueResource'
}
- 修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource
// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)
- 使用 webpack-cdn-plugin 插件
过去我们外部引入 CDN 需要手动编写 index.html 模板，在里面指定加载的版本，通过这个插件就能自动的把指定的公共库写入到 index.html 模板里，目前的文档有坑，我已经提了PR
需要注意的是，通过CDN引入，在使用 VueRouter Vuex ElmentUI 的时候要改下写法。CDN会它们挂载到window上，因此不再使用 Vue.use(xxx)
import Vue from 'vue'
import VueRouter from 'vue-router'
if (!window.VueRouter) Vue.use(VueRouter)
通过webpack-chunk-name 合并一些包
5.图片的压缩合并
无损压缩图片：https://tinypng.com/
如有可能，将图片制作成精灵图
6.引入按需加载插件，babel-plugin-component、babel-plugin-equire，做项目优化
7.gzip
拆完包之后，我们再用gzip做一下压缩
安装compression-webpack-plugin
const CompressionPlugin = require('compression-webpack-plugin')
// 要压缩的文件
const productionGzipExtensions = ['js', 'css'];
config.plugins.push(
new CompressionWebpackPlugin({
algorithm: 'gzip',
//test: /\.js$|\.html$|\.json$|\.css/,
test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
threshold: 10240,// 只有大小大于该值的资源会被处理
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
filename: '[path].gz[query]',
deleteOriginalAssets: false // 删除原文件
})
);
可以看到200k以上的文件被压缩到了100k以内
在服务器我们也要做相应的配置
如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件
服务器是用express框架搭建的
只要安装一下compression就能使用
const compression = require('compression')
app.use(compression())
注意，后面这一句，要放在所有其他中间件注册之前
8.CSS分离
9.图片压缩
vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积
(1) 先安装依赖：cnpm install image-webpack-loader --save-dev
(2) 在vue.config.js中module.exports写入：
module.exports = {
productionSourceMap: false,
chainWebpack: config => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
}
}
10.UglifyJsPlugin 压缩
通过UglifyJSPlugin可以压缩我们的*.js文件。
1)安装uglifyjs-webpack-plugin
npm i -D uglifyjs-webpack-plugin
2.vue.config.js 添加 configureWebpack 生产环境
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true, // 注释debugger
drop_console: true, // 注释console
pure_funcs: ['console.log'] // 移除console
},
warnings: false,
},
sourceMap: false,
parallel: true,//使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
})
);
