優化 SPA 首屏載入速度

MengCY發表於2019-01-30
優化

修改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 協議》，轉載必須註明作者和本文連結

相關文章