单页面应用首屏渲染加载速度很慢。如何压缩项目体积减少从而实现更快的实现首屏响应速度？
今天要实现的办法就是提供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: {
......
extral实际上表示在打包的时候把相关的项目文件排除。例子中extral的配置表示 打包的时候排除vue，vuex,vue-router,axios,echarts，iveiw。这样文件体积一下子会减小很多
}
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的筛选功能icon无法显示。筛选菜单无法显示。经排查发现问题的原因出现在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>
至此问题解决
