打包优化
- 前后对比
- webpack是啥
- 使用compression-webpack-plugin
- 压缩图片
- 使用webpack-bundle-analyzer
- 使用uglifyjs-webpack-plugin
- cdn方式
- 使用html-webpack-plugin
- 结束
前后对比
6.45Mb 未进行gzip压缩 图片压缩和去掉打印等等
压缩过后1.43Mb
开启cdn，不打包vue\element\echarts,，打包下来225.25k
webpack是啥
Webpack是一个现代化的JavaScript应用程序的静态模块打包器，它使用的是模块的概念。它可以将各种资源，如JavaScript文件、样式文件、图片、字体等，都视为模块，然后将这些模块打包成JavaScript代码。这样做可以减少HTTP请求次数，提高页面加载速度。除了打包，Webpack还具有其他功能，如开发服务器、热模块替换、代码分割等等。它是现代化前端开发中必不可少的工具之一。
使用compression-webpack-plugin
在prod.conf中配置，打包多出gzip的文件
//gzip打包优化
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require("compression-webpack-plugin");
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: new RegExp(
"\\.(" + config.build.productionGzipExtensions.join("|") + ")$"
),
threshold: 2000,
minRatio: 0.8,
})
);
}nginx配置server
nginx.conf
gzip on; #是否开启gzip模块 on表示开启 off表示关闭
gzip_buffers 4 16k; #设置压缩所需要的缓冲区大小
gzip_comp_level 6; #压缩级别1-9，数字越大压缩的越好，也越占用CPU时间
gzip_min_length 100k; #设置允许压缩的最小字节
gzip_http_version 1.1; #设置压缩http协议的版本,默认是1.1
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; #设置压缩的文件类型
gzip_vary on; #加上http头信息Vary: Accept-Encoding给后端代理服务器识别是否启用 gzip 压缩压缩图片
可以使用插件image-webpack-loader进行压缩
使用webpack-bundle-analyzer
打包分析工具
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}使用uglifyjs-webpack-plugin
去掉console
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
let optimization = [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true, //去掉debugger
drop_console: true, // 去掉console
pure_funcs: ["console.log"], // 移除console
},
},
sourceMap: config.build.productionSourceMap,
parallel: true,
}),
];
webpackConfig.plugins.push(...optimization);cdn方式
使用html-webpack-plugin
html-webpack-plugin可以将变量写入html作为链接用
取消vue、element、axios和echarts的打包
再prod.conf配置
声明
// cdn 引入
const externalModules = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios':'axios',
'element-ui':'element-ui',
'echarts':'echarts',
'hljs':'highlight.js'
}
//cdn 配置
const externalConfig=[
{js:'https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js',css:''},
{js:'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js',css:''},
{js:'https://unpkg.com/axios/dist/axios.min.js',css:''},
{js:'https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js',css:''},
{js:'https://unpkg.com/element-ui/lib/index.js',css:'https://unpkg.com/element-ui/lib/theme-chalk/index.css'},
{js:'https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js',css:''},
{js:'https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/highlight.min.js',}
]使用html-webpack-plugin
传递参数 externalConfig
new HtmlWebpackPlugin({
filename:
process.env.NODE_ENV === "testing" ? "index.html" : config.build.index,
template: "index.html",
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: "dependency",
cdnConfig: externalConfig, // cdn配置
}),在html入口写入cdn链接
<!-- cdn -->
<% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.css){ %>
<link href="<%= item.css %>" rel="stylesheet" />
<% }}) %>
<!-- cdn -->
<% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js && !htmlWebpackPlugin.options.onlyCss){ %>
<script type="text/javascript" src="<%= item.js %>"></script>
<% }}) %>结束
本文分享webpack_vue打包优化打包到此结束，感谢你的阅读！
网站：https://yongma16.xyz/#/
开启gzip成功
