飞道的博客

前端学习（2740）：重读vue电商网站50之Element-UI 组件按需加载

2020-12-19 09:38 426人阅读  评论(0)

 

通过 CDN 优化 ElementUI 的打包

虽然在开发阶段，我们启用了 element-ui 组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将 element-ui 中的组件，也通过 CDN 的形式来加载，这样能够进一步减小打包后的文件体积。


具体操作流程如下：
① 在 main-prod.js 中，注释掉 element-ui 按需加载的代码
② 在 public/index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式

Javascript


       
    
        
  1. 
         
    
          
    
         
    
         
    
          
    
           <!-- element-ui 的样式表文件 -->
          
    
         
    2. 
        
  2. 
         
    
          
    
         
    
         
    
          
    
           <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-
          
    
         
    3. 
        
  3. 
         
    
          
    
         
    
         
    
          
    
           chalk/index.css" />
          
    
         
    4. 
        
  4. 
         
    
          
    
         
    
         
    
          
    
           <!-- element-ui 的 js 文件 -->
          
    
         
    5. 
        
  5. 
         
    
          
    
         
    
         
    
          
    
           <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js">
           </script>
          
    
         
    6.


转载：https://blog.csdn.net/weixin_43392489/article/details/110789143
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场