使用前に
使用後
方法
webpack 設定 Compression-webpack-plugin は gzip ファイルを圧縮します
機能: ネットワーク伝送速度の向上 -> Web ページの読み込み時間を最適化します。
基本的
- ブラウザーがリソース ファイルをリクエストすると、サーバーにサポートする圧縮エンコード タイプを伝えるために Accept-Encoding リクエスト ヘッダーが自動的に組み込まれます。
- サーバー構成により gzip オプションがオンになります: クライアント リソース ファイル リクエストを受信するときに、リクエスト ヘッダー Content-encoding でサポートされている圧縮エンコード形式を確認します。gzip が含まれている場合は、リソース リクエストへの各応答の前に gzip エンコードと圧縮を実行してから応答します。リソース ファイルへ (応答内のヘッダーには Content-encoding: gzip が含まれます)
- 応答を受信した後、ブラウザはリクエスト ヘッダーに Content-encoding:gzip が含まれているかどうかを確認し、含まれている場合は、返されたリソース ファイルを解凍し、解析してレンダリングします。
具体的な用途
1.プラグインをインストールする
1 |
npm install --save-dev compression-webpack-plugin |
2. プラグインを設定する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const CompressionPlugin = require( 'compression-webpack-plugin' ); const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; module.exports = {
publicPath: './' , productionSourceMap: false , configureWebpack: {...}, chainWebpack: config => {
config.resolve.alias.set( '@' , resolve( 'src' )); if (process.env.NODE_ENV === 'production' ) {
config.plugin( 'compressionPlugin' ) .use( new CompressionPlugin({
filename: '[path].gz[query]' , algorithm: 'gzip' , test: productionGzipExtensions, threshold: 10240, minRatio: 0.8, deleteOriginalAssets: true })); } }, }; |
または
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const CompressionPlugin = require( "compression-webpack-plugin" ); const productionGzipExtensions = [ 'js' , 'css' ] module.exports = {
configureWebpack: {
// provide the app's title in webpack's name field, so that it can be accessed // in index.html to inject the correct title. name: name, resolve: {
alias: {
'@' : resolve( 'src' ), }, }, plugins: [ new webpack.ProvidePlugin({
$: 'jquery' , jQuery: 'jquery' , 'windows.jQuery' : 'jquery' , }), new CompressionPlugin({
algorithm: 'gzip' , test: new RegExp( '\\.(' + productionGzipExtensions.join( '|' ) + ')$' ), threshold: 10240, minRatio: 0.8 }) ], } } |
3.nginxの設定
1 2 3 4 5 6 7 8 9 10 11 |
http {
gzip on; #on为启用,off为关闭 gzip_static on; gzip_min_length 1k; #设置允许压缩的页面最小字节数,页面字节数从header头中的Content-Length中进行获取。默认值是0,不管页面多大都压缩。建议设置成大于1k的字节数,小于1k可能会越压越大。 gzip_buffers 4 32k; #获取多少内存用于缓存压缩结果,‘4 16k'表示以16k*4为单位获得 gzip_http_version 1.1; #识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码 gzip_comp_level 2; #gzip压缩比(1~9),越小压缩效果越差,但是越大处理越慢,所以一般取中间值; gzip_types text /plain application /x-javascript text /css application /xml ; #对特定的MIME类型生效,其中'text/html'被系统强制启用 gzip_vary on; #启用应答头"Vary: Accept-Encoding" gzip_disable "MSIE [1-6]." ; #配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持) } |
上記は、vue プロジェクトをパッケージ化するときの gzip 圧縮の具体的な使用方法の詳細です。vue をパッケージ化するときの gzip 圧縮の詳細については、他の関連記事にも注目してください。
js で 2 つの配列が同じ要素を持つかどうかを判断する 4 つの方法/js で 2 つの配列が同じ要素を持つかどうかを判断する 4 つの方法/js で 2 つの配列が同じ要素を持つかどうかを判断する 4 つの方法/Js で 2 つの配列が同じ要素を持つかどうかを判断する同じ要素 要素の 4 つの方法