webpack打包报错:You can limit the size of your bundles by using import()

--> -->

• 文章目录

  • webpack打包报错
  • 解决方法
  • 添加配置项
  • 打包运行

• webpack打包报错

  $ npm run build:prod

  jiajialink-admin@3.2.1 build:prod /Users/zhangzhi/code/jjzn/admin vue-cli-service build

  ⠧ Building for production...

  WARNING Compiled with 3 warnings 8:22:16 PM

  warning

  asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: static/css/app.9b634dda.css (523 KiB) static/js/app.cc77b485.js (692 KiB) static/js/chunk-elementUI.c9638e95.js (662 KiB) static/js/chunk-libs.8d075028.js (4.05 MiB)

  warning

  entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: app (5.94 MiB) static/js/runtime.8ca233c5.js static/js/chunk-elementUI.c9638e95.js static/css/chunk-libs.591d70a3.css static/js/chunk-libs.8d075028.js static/css/app.9b634dda.css static/js/app.cc77b485.js

  warning

  webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/

  File Size Gzipped

  dist/static/js/chunk-libs.8d075028.js 4150.41 KiB 1404.46 KiB dist/static/js/app.cc77b485.js 691.83 KiB 171.07 KiB dist/static/js/chunk-elementUI.c9638e9 662.42 KiB 163.61 KiB 5.js dist/static/css/app.9b634dda.css 522.62 KiB 75.36 KiB dist/static/css/chunk-libs.591d70a3.cs 50.92 KiB 11.97 KiB s

  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

webpack在打包时,如果资源压缩超过250kb时,会报错提示:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application

解决方法

vue.config.js 的配置文件设置配置项
performance

• hints webpack在找到提示时抛出错误或警告
  包括枚举项 'error' | 'warning'| true | false
  true 打开错误提示 false 关闭
  'error' 只显示错误信息
  'warning' 只显示警告信息
• maxEntrypointSize 默认250kb
  控制webpack最大入口点文件大小超出限制时发出性能提示
• maxAssetSize 默认250kb
  控制webpack单个资产超出限制时发出性能提示

添加配置项

vue.config.js 文件中添加 performance 节点
节点对象下设置上面三个选项:

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    devtool: 'source-map',
    performance: {
      hints: 'error', 
      maxAssetSize: 300000, // 整数类型（以字节为单位）
      maxEntrypointSize: 500000 // 整数类型（以字节为单位）
    }
  }

注意:上面只是vue.config.js 中的一部分
我把单文件报警的限制大小调到 300kb,入口文件报警限制大小调到 500kb

打包运行

# zhangzhi @ ZhangZhi-MacBook-Pro in ~/code/jjzn/admin on git:develop x [20:22:18]
$ npm run build:prod

> jiajialink-admin@3.2.1 build:prod /Users/zhangzhi/code/jjzn/admin
> vue-cli-service build

⠧  Building for production...

 DONE  Compiled successfully in 47535ms                                                8:50:26 PM

  File                                      Size             Gzipped

  dist/static/js/chunk-libs.8d075028.js     4150.41 KiB      1404.46 KiB
  dist/static/js/app.4ca1fdcc.js            691.83 KiB       171.07 KiB
  dist/static/js/chunk-elementUI.c9638e9    662.42 KiB       163.61 KiB
  5.js
  dist/static/css/app.9b634dda.css          522.62 KiB       75.36 KiB
  dist/static/css/chunk-libs.591d70a3.cs    50.92 KiB        11.97 KiB
  s

  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

顺利打包成功!