1.webpack-bundle-analyzerコードボリューム分析プラグイン
// 分析代码体积工具
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 代码分析插件
config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin).init(Plugin => new Plugin({
analyzerMode: 'server', // 在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
analyzerHost: '127.0.0.1',
analyzerPort: 3000,
defaultSizes: 'parsed', // 模块大小默认显示在报告中。应该是`stat`,`parsed`或者`gzip`中的一个。
openAnalyzer: true, // 在默认浏览器中自动打开报告
logLevel: 'info' // 日志级别
}))
2.ツリーシェイク
vue-cliにはツリーシェイク機能が付属しています。オンデマンドで引用するだけで、「sideEffects」を構成する必要はありません。package.jsonではfalse、
次にjsでは、es6 export importgrammarを使用する必要があります。
3.cdnリソースの読み込み
// 利用cdn加载
const assetsCDN = {
// webpack build externals
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
},
css: [],
// https://unpkg.com/browse/[email protected]/
js: [
'//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
'//cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
'//cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
'//cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js'
]
}
configureWebpack: config => {
if (IS_PROD) {
// 防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖
config.externals = assetsCDN.externals
}
},
chainWebpack: (config) => {
if (IS_PROD) {
// html中添加cdn
config.plugin('html').tap(args => {
args[0].cdn = assetsCDN
return args
})
}
},
index.html
<!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">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</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>
<!-- built files will be auto injected -->
</body>
</html>
4.UglifyJsPluginjs圧縮除去ログ
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
configureWebpack: config => {
if (IS_PROD) {
const plugins = [];
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: { // 启用压缩功能
dead_code: true, // 移除没被引用的代码
unused: true, // 干掉没有被引用的函数和变量
drop_console: true, // 去除console.*函数
drop_debugger: false, // 移除 debugger
pure_funcs: ['console.log'], // 移除console
passes: 1 // 默认 1。运行压缩的次数。在某些情况下,用一个大于1的数字参数可以进一步压缩代码大小。注意:数字越大压缩耗时越长。
}
},
sourceMap: false,
parallel: true // 使用多进程并行运行来提高构建速度
})
);
config.plugins = [...config.plugins, ...plugins];
}
},
gzipの最適化
オプション1:CompressionWebpackPlugin
const CompressionWebpackPlugin = require("compression-webpack-plugin");
plugins.push(
// 仅使用 CompressionWebpackPlugin
new CompressionWebpackPlugin({
test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 需要压缩的文件类型
threshold: 10240, // 归档需要进行压缩的文件大小最小值,我这个是10K以上的进行压缩
deleteOriginalAssets: false, // 是否删除原文件
// filename: "[path].gz[query]",
algorithm: "gzip",
minRatio: 0.8
})
);
この種の.gzファイルはパッケージ化後に生成され
ます。nginx構成で必要
gzip_static on;
なのは、フロントエンドパッケージによって生成された.gzファイルを直接読み取るこの構成のみです。
フロントエンドが.gzファイルを生成しない場合、nginxはgzipを次のように構成することもできます
# 开启和关闭gzip模式
gzip on;
# gizp压缩起点,文件大于1k才进行压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 2;
# 需要压缩的文件mime类型
gzip_types text/plain application/javascript application/x-javascript text/javascript texts application/xml;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# nginx做前端代理时启用该选项,表示无论后端服务器的headers头返回什么信息,都无条件启用压缩
gzip_proxied expired no-cache no-store private auth;
# 不启用压缩的条件,IE6对Gzip不友好,所以不压缩
gzip_disable "MSIE [1-6]\.";