A recent project found a problem after each refresh browser page loading speed are good, however, the browser first loads it took 6sabout.
ThenHere comes the problem: It is fine in the development environment, but the user experience will be poor after it is delivered to the user. Who will use this product again? Under the current domestic Internet trend, if the product lacks the factor of competitiveness, it may be eliminated by the market!
I have thought about 白屏the way to use it, but the loading time in the middle is still too long to meet the user's requirements, so I checked back and forth between the Internet and major blogs, found a suitable solution, and summarized the following methods.
1. Close the map file generated during packaging. Change the value setting
in the config/index.js file productionSourceMapto change it false. If you package again, there will be no map file
2. Vue-router routing lazy loading
There are many ways to implement lazy loading, here are three implementation methods briefly
(1) Vue asynchronous component: import()
(2) webpack's require.ensure()
(3) vue asynchronous component
Vue 异步组件technology, that is 异步加载, vue-router configures routing, using Vue's asynchronous loading technology 可以实现按需加载, but in this case a component产生一个js文件
Solution 1: vue asynchronous component technology (require)
{
path: '/index',
name: 'index',
component: resolve => require(['@/views/index'],resolve)
}
Option 2: Lazy loading of components (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
}
Solution 3: ** require.ensure() provided by webpack **
webpack's require.ensure()
uses webpack's require.ensure() technology, which can also be loaded on demand. In this case, multiple routes specify the same chunkName will合并打包成一个js文件
{
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')
}
3. The CDN reference
CDN can reduce the code size and speed up the request speed. Using CDN mainly solves two problems. The packaging time is too long, the code volume after packaging is too large, the request is very slow, and the problem of server bandwidth is avoided.
示例
<!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>
If prompted Element is not defined, because Element dependent Vue, vue.js需要在element-ui之前引入so vue.js have changed cnd of introduction.
Then, /build/webpack.base.conf.jsmodify the configuration while modifying. To module.exportsadd the externalsproperty, where the key is referenced in the project, the value is the name of the resource referenced. It should be noted that the resource name needs to check the referenced JS source code and check what the global variables are. For example, the global variable of element-ui is ELEMENT
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'ElementUI': 'ELEMENT',
'axios': 'axios',
}
}
Then 删除原先的import, if the original import is not deleted, the project will still import resources from node_modules.
In other words, if you don't delete it, the referenced resources will still be packaged together when npm run build, and the generated file will be much larger. It's better to delete it!
Project running and packaging:
After packaging, it can be seen that the sizesum gzippedsize is significantly reduced. Generally, this can be optimized, and the browser can be loaded 3swithin the first time.