优化 SPA 首屏加载速度

修改webpack配置
laravel环境根目录下
webpack.mix.js

原版代码
let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js').extract(['vue','vue-router','element-ui']).version().webpackConfig({
    plugins: [
        // new BundleAnalyzerPlugin(),
    ],
    resolve: {
        alias: {
            Css: path.resolve(__dirname, 'resources/assets/css'),
            Sass: path.resolve(__dirname, 'resources/assets/sass'),
        }
    }
});
优化

1、安装动态懒加载所需插件
babel-plugin-syntax-dynamic-import
配置/laravel/.babelrc

{
  "plugins": ["syntax-dynamic-import"]
}

2、去掉.extract()
它包含需要编译的文件类型,现在vue等静态资源从CDN加速

3、配置output输出形式

chunkFilename: 'js/chunk/[name].js?v=[chunkHash]'

4、配置externals
它所包含的文件类型将被排除,避免不必要的静态资源包含进来,导致编译出的文件过大

5、在首页HTML挂载点之前引入静态资源CDN

6、配置vue路由
由require()方式修改为() => import()方式

{
    path: '/home/wx/auth',
    component: () => import ('./views/home/wx/Auth')
},

在import可以指定输出js文件的名称

如:import(/* webpackChunkName:'login'*/ '../component/Login.vue');
最终webpack.mix.js
let mix = require('laravel-mix');

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

mix.js('resources/assets/js/home.js', 'public/js').version().webpackConfig({
    output: {
        chunkFilename: 'js/chunk/[name].js?v=[chunkHash]'
    },
    resolve: {
        alias: {
            Css: path.resolve(__dirname, 'resources/assets/css'),
            Sass: path.resolve(__dirname, 'resources/assets/sass'),
        }
    },
    externals: {
        'element-ui': 'ELEMENT',
        'axios': 'axios',
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'lodash': '_',
    }
});

重新编译即可看到chunk文件夹下若干生成的js文件,即优化成功

本作品采用《CC 协议》,转载必须注明作者和本文链接
MengCY
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 1
bestcyt

斯国一

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!