單頁應用會隨著項目越大，導致首屏加載速度很慢?。?！以下給出在下知道的幾種優化方案
使用CDN資源,減小服務器帶寬壓力 路由懶加載 將一些靜態js css放到其他地方（如OSS），減小服務器壓力 按需加載三方資源，如iview,建議按需引入iview中的組件 使用nginx開啟gzip減小網絡傳輸的流量大小 webpack開啟gzip壓縮 若首屏為登錄頁，可以做成多入口，登錄頁單獨分離為一個入口使用CDN資源,減小服務器帶寬壓力
在index.html中引入cdn資源
... <body> <div id="app"> </div> <!-- built files will be auto injected --> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> </body> ...
修改 build/webpack.base.conf.js
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, externals:{ 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex':'Vuex', 'vue-resource': 'VueResource' }, ...}修改src/main.js src/router/index.js 注釋掉import引入的vue,vue-resource
// import Vue from 'vue'// import VueResource from 'vue-resource'// Vue.use(VueResource)
路由懶加載
const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/page/List')), 'workCircleList')將一些靜態js css放到其他地方（如OSS），減小服務器壓力
注意這里的js文件，需要將結果拋出，然后在需要用到該js的組件中import引入
按需加載三方資源，如iview,建議按需引入iview中的組件
按需引用請查看iview官方文檔iview
使用nginx開啟gzip減小網絡傳輸的流量大小
配置nginx，可以參考Nginx開啟Gzip壓縮大幅提高頁面加載速度
webpack開啟gzip壓縮
這里需要配合Nginx服務器，Nginx開啟gzip
config/index.js中
module.exports = { build: { ... // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: true, // 就是這里開啟gzip,vue-cli搭建項目，這里默認為false productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }}
新聞熱點
疑難解答
