vue 首次加載緩慢/刷新後加載緩慢 原因及解決方案
最近做項目發現一個問題,頁面每次刷新後加載速度都非常慢,20s左右,在開發環境則非常流暢,幾乎感覺不到,本文參考望山的各種方案優化
1,關閉打包時生成的map文件
在config/index.js文件中講productionSourceMap設置爲false,再次打包便沒有了map文件
2,vue-router路由懶加載
懶加載的實現方式有很多種,這裏簡單說三種實現方法
- vue異步組件
- import()
- webpack的require.ensure()
vue 異步組件
vue異步組件技術也就是異步加載,vue-router配置路由,使用veu的異步加載技術,可以實現按需加載,但是這種情況下一個組件生產一個js文件
/* vue異步組件技術 */
{
path: '/index',
name: 'index',
component: resolve => require(['@/views/index'],resolve)
}使用import
組件懶加載方案二
// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。
const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
// 下面2行代碼，指定了相同的webpackChunkName，會合並打包成一個js文件。 把組件按組分塊
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
// router
{
path: '/about',
component: About
}, {
path: '/index',
component: Index
}webpack的require.ensure()
使用webpack的require.ensure()技術,也可以實現按需加載.這種情況下,多個路由指定相同的chunkName會合並打包成一個js文件
/* 組件懶加載方案三: webpack提供的require.ensure() */
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}CDN引用
CDN可以減少代碼體積加快請求速度,使用CDN主要解決兩個問題,打包時間太長,打包後代碼體積太大,請求很慢,還有就是迴避服務器帶寬問題
具體步驟
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>vue-manage-system</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>如果提示Element未定義,是因爲Element依賴Vue，vue.js需要在element-ui之前引入，所以vue.js也要改爲cnd的引入方式.
然後,修改/build/webpack.base.conf.js中修改配置。給module.exports添加externals屬性(詳見https://webpack.docschina.org...，其中鍵是項目中引用的，值是所引用資源的名字。需要注意的是資源名需要查看所引用的JS源碼，查看其中的全局變量是什麼，例如element-ui的全局變量就說ELEMENT
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'ElementUI': 'ELEMENT',
'axios': 'axios',
}
}然後刪除原先的import,如果不刪除原先的import，項目還是會從node_modules中引入資源。
也就是說不刪的話，npm run build時候仍會將引用的資源一起打包，生成文件會大不少。還是刪了好。
參考文章列表:感謝大神們
vue頁面首次加載緩慢原因及解決方案
vue項目實現按需加載的3種方式：vue異步組件、es提案的import()、webpack的require.ensure()