webpack 如何壓縮專案體積提交首頁渲染速度？
單頁面應用首屏渲染載入速度很慢。如何壓縮專案體積減少從而實現更快的實現首屏響應速度？
今天要實現的辦法就是提供cdn+webpakck來實現。例項以我自己的專案為例。
第一步：
在build資料夾下找到webpack.base.config.js檔案。新增externals屬性：
程式碼如下：
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill','./src/main.js']
},
output: {
...
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
externals:{
"vue":"Vue",
"vuex":"Vuex",
"vue-router":"VueRouter",
"axios":"axios",
"echarts":"echarts",
"iview":"iview"
},
module: {
......
}
2 main.js入口檔案作如下修改：
import App from './App'
import router from './router' 檔案路徑正常引入
import store from "./store/store.js" 檔案路徑正常引入
import "iview/dist/styles/iview.css" css路徑正常引入
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
注意：main.js作了很多的修改。除了css和檔案的正常引入（比如app.vue和router.js檔案等）以外。包括vue和Vue.use(vueRoute)等其他程式碼全部要刪掉。
3 router資料夾下的router配置不做任何改變。
import Vue from 'vue'
import Router from 'vue-router'
const Login=r=>require.ensure([],()=>r(require('../components/Login.vue')),'Login')
const Sidebar=r=>require.ensure([],()=>r(require('../components/Sidebar.vue')),'Sidebar')
Vue.use(Router)
const router= new Router({
routes: [
{
path: '/',
name:"login",
component:Login
},
{
path: '/sidebar',
name: 'sidebar',
component: Sidebar
},
]
})
export default router
4 首頁index.html頁面需要引入externals排除掉的所有檔案的cdn地址。需要注意的是儘量把cdn地址引入到head中。因為打包以後的script標籤會被插入到body中，避免遇到解析作用域問題
修改如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body,html{background: rgb(239, 243, 246)}
</style>
<title>如見後臺管理系統</title>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.0/vue-router.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.1/echarts-en.common.js"></script>
<script src="https://cdn.bootcss.com/iview/3.0.1-rc.1/iview.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
通過cdn+webpakc的externals專案由打包之前的12m一下變成了4m。效果明顯
我的專案採用的是iview,通過這種方案雖然解決了打包檔案體積變小的目的，但是存在一個問題：
專案中原本table的篩選功能無法顯示。篩選選單無法顯示。經排查發現問題的原因出現在main.js檔案中引入 的iview的css樣式
import App from './App'
import router from './router' 檔案路徑正常引入
import store from "./store/store.js" 檔案路徑正常引入
import "iview/dist/styles/iview.css" css路徑正常引入
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
解決的辦法，把iview的樣式在index.html頁面中通過link標籤匯入。把main.js中import "iview/dist/styles/iview.css"去掉。
最後的程式碼如下：
------------------------------------------------------------------------------------------
main.js
import App from './App'
import router from './router'
import store from "./store/store.js"
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
------------------------------------------------------------------------------------------
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/3.0.1-rc.1/styles/iview.css">
<style>
body,html{background: rgb(239, 243, 246)}
</style>
<title>如見後臺管理系統</title>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.0/vue-router.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.1/echarts-en.common.js"></script>
<script src="https://cdn.bootcss.com/iview/3.0.1-rc.1/iview.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
至此問題解決