Laravel 中优化 app.js 的大小

近期做了一个小项目，前端是通过 Laravel Mix 编译的，产生的 app.js ，大小有 3M 还多，不得不优化一下……

没做任何优化之前：

查看应用的前端库结构

安装 npm install --save-dev webpack-bundle-analyzer 。

修改 webpack.mix.js 配置。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

mix.webpackConfig({
 plugins: [
     new BundleAnalyzerPlugin(),
 ]
});

运行 npm run dev 或者 npm run production ，浏览器中自动打开 http://127.0.0.1:8888/ 页面。

鼠标悬浮可以显示包大小

分离内存较大的库

这些库会被 webpack 一起打包成一个 app.js，所以减小应用体积的最有效方法就是将这些库分离出去，别将它们与我们自己写的应用代码打包到一起。大部分有名的第三方库在公共CDN都有存放，如 bootcss, unpkg 等，速度飞快，可以直接引用。

配置 webpack.mix.js ：

mix.webpackConfig({
    plugins: [
        new BundleAnalyzerPlugin(),
    ],
    externals: {
        'element-ui': 'Element',
        'vue': 'Vue',
        'lodash': '_',
    }
}).js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

resources/views/layouts/app.blade.php 文件中加入 element-ui、vue、lodash 的外链

<link href="https://cdn.bootcss.com/element-ui/2.0.11/theme-chalk/index.css" rel="stylesheet">
<script src="//cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script src="//cdn.bootcss.com/element-ui/2.0.11/index.js"></script>
<script src="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>

resources/js/app.js 和 resources/js/bootstrap.js 文件中将 require('vue') 、require('lodash') 、import ElementUI from 'element-ui' 的位置删除，否则编译时会报错。
运行 npm run dev
运行 npm run production

优化浏览器加载时的大小

在这里要做的就是开启 Nginx 的 gzip 压缩。

没开启时：
开启 gzip 压缩后

nginx.conf 中配置：

#gzip  on;
gzip on;
gzip_min_length  1k;            # 不压缩临界值，大于1K的才压缩，一般不用改
gzip_buffers     4 32k;         # 设置用于处理请求压缩的缓冲区数量和大小。比如32 4K表示按照内存页（one memory page）大小以4K为单位（即一个系统中内存页为4K），申请32倍的内存空间。建议此项不设置，使用默认值。
gzip_http_version 1.1;          
gzip_comp_level 2;              # 压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
gzip_types       text/plain application/x-javascript text/css application/xml;      # 进行压缩的文件类型
gzip_vary on;          # 跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"，按需开启
gzip_disable "MSIE [1-6].";

查看应用的前端库结构

分离内存较大的库

优化浏览器加载时的大小

标签