优化SPA首屏加载速度

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33896101/article/details/85060396

Laravel+vue@^2.0

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

原版

let mix = require('laravel-mix');

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

mix.js('resources/assets/js/home.js', 'public/js').extract(['vue','vue-router','element-ui']).version().webpackConfig({
    plugins: [
        //new BundleAnalyzerPlugin(),
    ],
    resolve: {
        alias: {
            Helper: path.resolve(__dirname, 'resources/assets/js/helper'),
            Tabs: path.resolve(__dirname, 'resources/assets/js/data/tabs'),
            Css: path.resolve(__dirname, 'resources/assets/css'),
            Sass: path.resolve(__dirname, 'resources/assets/sass'),
            components: path.resolve(__dirname, 'resources/assets/js/views/home/components')
        }
    }
});

优化

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: {
            Helper: path.resolve(__dirname, 'resources/assets/js/helper'),
            Tabs: path.resolve(__dirname, 'resources/assets/js/data/tabs'),
            Css: path.resolve(__dirname, 'resources/assets/css'),
            Sass: path.resolve(__dirname, 'resources/assets/sass'),
            components: path.resolve(__dirname, 'resources/assets/js/views/home/components')
        }
    },
    externals: {
        'element-ui': 'ELEMENT',
        'axios': 'axios',
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'lodash': '_',
    }
});

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

新版1540KB
原版4100KB