文章目录

• 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

顺利打包成功!

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