开发 laravel-mix 启用 compression-webpack-plugin 开启 gzip 压缩

· 发布于 6个月前 · 最后由 回复于 6个月前 · 402 次阅读
本帖最后由 阳 于 2018-11-06 08:21:17 编辑。

laravel-mix 就是一个魔改版的 webpack ,所以可以使用一些 webpack 插件的。

要想使用 compression-webpack-plugin 插件怎么做到呢?

只需要修改 webpack.mix.js 即可。

满满干货,直接上代码

file: webpack.mix.js

const {mix} = require('laravel-mix')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

const webpackConfig = {
    output: {
        publicPath: '/',
        chunkFilename: 'js/[name].[chunkhash].js'
        // chunkFilename: 'js/[name].js'
    },
    resolve: {
        alias: {
            'js': 'assets/js',
        },
        modules: [
            'node_modules',
            path.resolve(__dirname, 'resources')
        ]
    },
    // 外部扩展 -- 防止将某些 import 的包(package)打包到 bundle 中
    externals: {
        // 'jquery': 'window.jQuery',  // import $ from 'jquery';
    },
    plugins: [],
}

if (mix.inProduction()) {
    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
                '\\.(' +
                ['js', 'css'].join('|') +
                ')$'
            ),
            threshold: 10240,
            minRatio: 0.8
        })
    )
}

mix.webpackConfig(webpackConfig)

if (mix.inProduction()) {
    // @see https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md
    mix.options({purifyCss: true})
    mix.version()
} else {
    mix.sourceMaps()
    //.browserSync('your-dev-domain')   // auto reload
}

mix .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .disableNotifications()

这样当你运行 npm run prod 打包js和css文件时, 会生成一个同名的带 .gz 后缀的压缩文件

compression-webpack-plugin打包后的目录结构

把它们都部署到服务器, 可以开启 nginx 的 gzip_static on; 可以加速访问的同时减少 nginx 开销。

我把这个功能实现了发现我的 BCH 不支持 gzip_static 。 心疼100秒。 还是等有软妹币了换 VPS 吧。

共收到 1 条回复
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册