Problem Description:
There is a recently developed a one-page application, after the initial loading of the page to find the line 20s to complete, which is affecting the user experience, so analyze the causes and find the page loads
vendor.js reached more than 3000 kb, so the Internet to find a reason for it, because when I packed all third-party relies are packaged into went; how to separate it out,
See the following steps:
First, solve the packaged vendor.js great cause on the line after the page is first loaded Extremely Slow:
vue-cli npm run build a unified command default package dependencies in the dependency, resulting in vendor.js file is too big, too slow to load problem first screen appearance.
Solution: Use externals reference to third-party resources, to prevent the element resources are packed into their own project, (a total of three modified section index.html, webpack.base.conf.js, main.js)
1, modify the index.html page, the introduction of resources on the cdn in the head.
<-! Cdn resources can be properly introduced ->
<script src="https://cdn.bootcss.com/vue/2.5.16/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/element-ui/2.4.0/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>
NOTE: The above is the introduction of the direct re-cdn, cdn servers sometime if there is a problem, our project was paralyzed, so for safety reasons to give their hold back Oh,
Adopted the following way, after the introduction of the above document fails, introduced from alternate address; of course you can also alternate address into a local, I have here is another place of cdn server,
Two servers at the same time should not fail it! ...
<!-- 引入 cdn 资源 -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
//<![CDATA[
if (typeof Vue == 'undefined') { document.write(unescape("%3Cscript src='https://cdn.staticfile.org/vue/2.6.10/vue.min.js' %3E%3C/script%3E")); } //]]> </script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script> //<![CDATA[ if (typeof VueRouter == 'undefined') { document.write(unescape("%3Cscript src='https://cdn.staticfile.org/vue-router/3.0.7/vue-router.min.js' %3E%3C/script%3E")); } //]]> </script> <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script> <script> //<![CDATA[ if (typeof ELEMENT == 'undefined') { document.write(unescape("%3Cscript src='https://cdn.staticfile.org/element-ui/2.10.1/index.js' %3E%3C/script%3E")); } //]]> </script> <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script> <script> //<![CDATA[ if (typeof echarts == 'undefined') { document.write(unescape("%3Cscript src='https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts-en.min.js' %3E%3C/script%3E")); } //]]> </script>
2, modify webpack.base.conf.js file. Adding externals Configuration
externals: {
'shock': 'Sight' ,
'shock-router': 'VueRouter' ,
'element-ui': 'ELEMENT' ,
"echarts": "echarts" ,
},
3. Delete the corresponding import from main.js in. Because if not removed, will be packed when playing these two files into it.
Finally to pack and found vendor.js the only 300kb. After the on-line quickly find a page is first loaded.
The following add some other optimizations:
1, the route lazy loading must be done:
When the package build applications, Javascript package will become very large, affecting page load. If we can route different components corresponding to different code divided into blocks,
When the route is then loaded until accessed corresponding components, so the more efficient. Vue binding of the asynchronous component and Webpack of the code division function ,
轻松实现路由组件的懒加载。具体实现方法官网和网上有很多例子，这里就不详细讲解了。
3、本地图片与请求的后台图片的大小：
在我这个项目中有很多图片，最开始没太在意图片的大小，导致上线后很多大的图片加载很慢，于是我把图片做了压缩处理；推荐个网站：
http://www.bejson.com/ui/compress_img/（压缩图片不失帧）；
当然我们也可以使用webpack里的插件对打包的图片进行压缩，也可以使用gulp.js里的插件对图片进行压缩。具体自己去百度吧...
4、打包后app.css过大：
我们可以把app.css做拆分，可以利用 webpack 中的 dll 做一部分的分割，比如第三方等的公用 css 文件。
然后再者可以利用 mini-css-extract-plugin 这个插件做各自模块的 css 文件提取（如果用的是webpack4）,
webpack3 的化可以用 extract-text-webpack-plugin。