普歌- Vue-cli3|4 打包build优化（vue.config.js+nginx+gzip）已实战测试chunk大小小了3倍

本文主要是介绍普歌- Vue-cli3|4 打包build优化（vue.config.js+nginx+gzip）已实战测试chunk大小小了3倍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

哈哈哈。好久没更新了，因为参加了工作和校招面试，还有一部分是自己学习。大部分笔记都写在印象笔记上了，后续会持续分享哈。

分入口文件

因为我们打包时需要不同的main配置文件。方便进行打包
需要在根目录下创建两个main文件。
在vue.config.js中写入webpack语法或者vue.config提供的语法。识别环境变量(我环境变量是通过cross-env进行控制)

module.exports = {chainWebpack: config => {config.when(process.env.NODE_ENV === 'development', config => {// entry找到默认的打包入口，调用clear则是删除默认的打包入口config.entryPoints.clear()config.entry('puge-dev')// add添加新的打包入口.add('./src/main-dev.js')})// 生产环境config.when(process.env.NODE_ENV === 'production', config => {config.entryPoints.clear()config.entry('puge-prod').add('./src/main-prod.js')})},
}

生产环境production启用cdn(我这里用的是免费的bootcdn)

HtmlWebpackPlugin启用cdn，会忽略打包一堆依赖包。使得chunk包会小很多，忽略打包的依赖包用别人的cdn链接引入.
想看前后chunk包对比。可以下载webpack-bundle-analyzer 分析包
代码如下(vue.config.js)。注释已经写好了。有问题私信俺

module.exports = {
/***  webpack链式写法* @param {*} config*/chainWebpack: config => {config.when(process.env.NODE_ENV === 'development', config => {// entry找到默认的打包入口，调用clear则是删除默认的打包入口config.entryPoints.clear()config.entry('puge-dev')// add添加新的打包入口.add('./src/main-dev.js')})// 生产环境config.when(process.env.NODE_ENV === 'production', config => {config.entryPoints.clear()config.entry('puge-prod').add('./src/main-prod.js')// 忽略打包一些模块// 左边是package里的包名。右边是在项目中你引入的名字config.externals({vue: 'Vue','vue-router': 'VueRouter',vuex: 'Vuex',axios: 'axios','js-cookie': 'Cookies','core-js': 'CoreJs','animate.css': 'animate.css'})// 修改 HtmlWebpackPlugin 插件参数，用cdns参数 植入 boot-cdn// 添加的css或者js链接的包版本一定要和package.json中一样config.plugin('html').tap((args) => {args[0].cdns = {css: [// animate.css'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css'],js: [// vue  vue-router vuex'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js','https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js','https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js',// core-js'https://cdn.bootcdn.net/ajax/libs/core-js/3.6.5/minified.min.js',// axios'https://cdn.bootcdn.net/ajax/libs/axios/0.25.0/axios.min.js',// js-cookie'https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js']}return args})})}

注意：生产环境中一些包需要在main-prod.js中的就不用引入了。比如antDvue、animate.css等等

更改public/index.html，用htmlWebpackPlugin引入cdns

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 引入htmlWebpackPlugin插件中cnds --><% if(htmlWebpackPlugin.options.cdns) {%><% for(var css of htmlWebpackPlugin.options.cdns.css) { %><link rel="stylesheet" href="<%=css%>" /><% } %><% } %>
</head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><div id="app"></div><!-- cdn script --><!-- 引入htmlWebpackPlugin插件中cnds --><% if(htmlWebpackPlugin.options.cdns) {%><% for(var js of htmlWebpackPlugin.options.cdns.js) { %><script src="<%=js%>"></script><% } %><% } %>
</body></html>

看看打包

继续优化包大小，开启gzip压缩(webpack+nginx)

单方面优化加载速度的方法：gzip压缩可以提高2-3倍的速度

前端vue项目中进行gzip相关的配置

先下载一个webpack依赖

# 我们下载5.0.1版本
npm i -D compression-webpack-plugin@5.0.1
# 高版本语法已经改变，如果下载高版本打包时可能会出现一下错误

error描述
vue,config.js中配置

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = { configureWebpack: () => {if (process.env.NODE_ENV === 'production') {return {plugins: [new CompressionPlugin({test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩deleteOriginalAssets: false // 是否删除原文件})]}}}
}

nginx方面也要配置gzip。不然浏览器中不生效

	# nginx开启gzip服务gzip on;gzip_disable "msie6";gzip_vary on;gzip_proxied any;gzip_comp_level 6;gzip_buffers 16 8k;gzip_http_version 1.1;# 需要开启gzip压缩的格式，如果发现需要的js/css/图片没开启gzip。可以在响应头里查看他的content-type类型是否在这配置了gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png image/jpg;

查看传输文件类型

配置完成后，对项目进行 npm run build 打包之后，你可以在dist文件夹下看到相应的.gzip的文件，这就是进行压缩后生成的，这时我们在开发者工具中的network中查看我们的js或者其他文件的请求：
开启前：

开启后：

optimize完结。有问题私信or评论呐

更多推荐：wantLG的《普歌-vue项目中通过文件操作进行动态加载路由(router.js)》

作者：wantLG
本文源自：wantLG的《普歌- Vue-cli3|4 打包build优化（vue.config.js+nginx+gzip）已实战测试chunk大小小了3倍！！！》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。

这篇关于普歌- Vue-cli3|4 打包build优化（vue.config.js+nginx+gzip）已实战测试chunk大小小了3倍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！