请教各位前端大佬 js、css 文件太大问题
发布于 6 年前 作者 im-here 6382 次浏览 来自 问答

后端出身,偶尔也写点前端代码,但是基本上都是借用现有的框架

最近做一个移动端的网页,使用vue 2.0+element-ui

做完build之后发现js和css文件太大了,打开一个页面要加载1.2M的js和css文件

贴一下vue build 的log

Version: webpack 3.12.0
Time: 20721ms
                                                  Asset       Size  Chunks                    Chunk Names
                 static/fonts/element-icons.6f0a763.ttf      11 kB          [emitted]
               static/js/vendor.74e7738e8c0916a28a81.js     726 kB       0  [emitted]  [big]  vendor
                  static/js/app.1cd5647b901de7d30cc7.js    5.04 kB       1  [emitted]         app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
    static/css/app.78fb8a529b8373e9e08b2d3833526bb5.css     403 kB       1  [emitted]  [big]  app
static/css/app.78fb8a529b8373e9e08b2d3833526bb5.css.map     574 kB          [emitted]
           static/js/vendor.74e7738e8c0916a28a81.js.map    2.78 MB       0  [emitted]         vendor
              static/js/app.1cd5647b901de7d30cc7.js.map    19.9 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                             index.html    1.08 kB          [emitted]

请教各位大佬,该如何优化呢?

5 回复

移动端建议不要用element-ui 包比较大 你可以使用npm run build --report看一看报告分析 优化方式有两种 1、element中的组件使用不多的话使用按需引入 参考 http://element-cn.eleme.io/#/zh-CN/component/quickstart 2、使用一个移动端框架替换element(或者自己写一套精简版的element组件,按需写 移动端使用功能的不会太复杂 这样无需修改代码 只要把组建重写 把element引入干掉就行)

此外,还可以考虑使用gzip压缩,但个人认为element-ui不适合移动端 如果使用的地方不多的话 干脆就换一个框架或者重写

  • 可以使用组件按需加载
  • mint-ui试试这个

@yuezm 可别mint了, 组件太少了. Vant了解一下, 拿来做了公司项目.

按需引入 ,或者CDN引入

回到顶部