webpack_vue打包优化
打包优化 结束
前后对比
压缩过后1.43Mb
开启cdn，不打包vue\\,，打包下来225.25k
是啥
是一个现代化的应用程序的静态模块打包器，它使用的是模块的概念。它可以将各种资源，如文件、样式文件、图片、字体等，都视为模块，然后将这些模块打包成代码。这样做可以减少HTTP请求次数，提高页面加载速度。除了打包，还具有其他功能，如开发服务器、热模块替换、代码分割等等。它是现代化前端开发中必不可少的工具之一。
使用--
在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配置
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--进行压缩
使用--
打包分析工具
if (config.build.bundleAnalyzerReport) {const BundleAnalyzerPlugin =require("webpack-bundle-analyzer").BundleAnalyzerPlugin;webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
使用--
去掉
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");let optimization = [new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false,drop_debugger: true, //去掉debuggerdrop_console: true, // 去掉consolepure_funcs: ["console.log"], // 移除console},},sourceMap: config.build.productionSourceMap,parallel: true,}),];webpackConfig.plugins.push(...optimization);
cdn方式
cdn推荐
使用html--
html--可以将变量写入html作为链接用
取消vue、、axios和的打包
再prod.conf配置
