现在网上有很多关于压缩
webpack体积的方案，接下来就通过一个小项目，就是在vue-cli3的基础上安装了vue，vue-router和vuex这些包，来对这些方案进行尝试，来试试这些方案可以达到什么样的优化效果吧！
安装项目
//全局安装vue-cli
npm install -g @vue/cli
//创建项目
vue create vue-frame
//进入项目文件
cd vue-frame
//安装依赖包
npm install
//安装vue,vue-router和vuex
npm install vue vuex vue-router -S
//启动下
npm run serve
一切准备就绪，我们执行下npm run build来看下打出来的包的大小。
初始打包大小.png
这个文件过大的原因在于webpack打包会将js和css各自集中打包成一个文件，也就是vender.js和app.css，这两个文件包含整个项目的代码，当页面的加载的时候，是将vender.js和app.css全部加载完毕后才会显示，所以优化项目的目标就是减少/拆分这两个文件。
第一步：去除map文件
map文件是用于在开发的时候方便调试的，在生产环境要关闭。不然会暴露代码造成安全隐患，而且打包文件过大。
productionSourceMap: false
去除map文件.png
第二步：使用CDN加载静态文件
使用CDN加载静态文件的好吃就是不让静态文件打包进webpack的，从而减少打包文件的体积，这里需要配合externals使用，目前项目可以抽离vue，vue-router和vuex这些包，首先需要在vue.config.js里面配置externals。
configureWebpack:{
externals: {
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex'
}
}
其次在index.html中通过CDN引入
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
记得配置完以上两项之后要记得要移除node_modules中对应的依赖。
npm uninstall vue vue-router vuex -S
使用CDN加载静态文件.png
第三步：路由懒加载
路由懒加载的作用就是把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
}
路由懒加载不会减少整体文件的体积，但是它对于加快首屏加载速度非常关键。因为使用懒加载的话组件分割成不同的代码块，目前只要加载完首页的代码块页面就会展现出来。
第四步：去除console.log
如果项目中使用了大量的console.log，并且发布的时候没有及时清除，这时候如果手动清除的话也不是很方便，这时候就可以用terser-webpack-plugin来优化项目。
npm install terser-webpack-plugin -D
在vue.config.js里面配置
configureWebpack: (config)=>{
if(process.env.NODE_ENV === 'production'){
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
}
}
第五步：开启gzip压缩
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
安装插件
npm i -D compression-webpack-plugin
vue.config.js配置
const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new CompressionWebpackPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10K的文件进行压缩
deleteOriginalAssets: false //是否删除源文件
})
]
}
}
}
执行完压缩命令后，就会看到生成的文件以gz为后缀的资源文件
开启gzip压缩.png
不过还需要对服务器进行配置，根据
Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件
网友评论