Vue + element-ui 打包生成的js文件这么大正常吗?

libraco
  • 760

package.json 文件内容:

{
  "name": "wingspage",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "element-ui": "^2.4.11",
    "lodash": "^4.17.11",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "vue-template-compiler": "^2.5.17"
  }
}

npm run build打包输出:

> wingspage@0.1.0 build D:\GOPATH\src\WingsGo\page
> vue-cli-service build


-  Building for production...

 WARNING  Compiled with 2 warnings                                                                                                                         14:55:14
 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-vendors.40fc56d8.js (746 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (959 KiB)
      css/chunk-vendors.9c8e3772.css
      js/chunk-vendors.40fc56d8.js
      css/app.d188071d.css
      js/app.314fa8ec.js


  File                                    Size              Gzipped

  dist\js\chunk-vendors.40fc56d8.js       745.90 kb         191.94 kb
  dist\js\app.314fa8ec.js                 18.14 kb          6.09 kb
  dist\js\chunk-3853daff.7c85ec3e.js      0.68 kb           0.44 kb
  dist\js\chunk-26ad2470.57300bb8.js      0.68 kb           0.44 kb
  dist\css\chunk-vendors.9c8e3772.css     194.50 kb         29.45 kb
  dist\css\app.d188071d.css               0.04 kb           0.06 kb
  dist\css\chunk-26ad2470.739f8c92.css    0.00 kb           0.02 kb
  dist\css\chunk-3853daff.739f8c92.css    0.00 kb           0.02 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

页面功能逻辑很简单,引用组件也不多,由于js太大,打开页面比较慢(相比jquery的同等实现),前端不太熟,是不是我哪里配置不对?

回复
阅读 7.5k
4 个回答

正常,估计 element 全量引入了吧,配置下按需引入会小一点。

你这个大小是没有进行按需加载,官网快速上手里面有按需加载,可以参考配置

vendors 700多k还可以吧。。。
以现在的网速这个体验差别应该不是特别大,追求极致体验当我没说。
除了cdn、按需,还可以试试:

1.路由懒加载。
2.页面做loading。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏