webpack打包性能优化（二）按需引入和加载简介 webpack 打包时，性能优化的一些方式，组成了这个系列文章，欢迎

简介

webpack 打包时，性能优化的一些方式，组成了这个系列文章，欢迎点赞和评论交流～

系列文章

配置打包去掉注释，删除debugger，删除console

new webpack.optimize.UglifyJsPlugin({
    comments: false, //去掉注释
    compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true
    }
}),

ant design 按需引入

可以参考：github.com/ant-design/…

可以直接写，缺点每个组件需要单写一行
```
import Button from "antd/lib/button"
```
用对象的方式写
```
import { Button } from 'antd';
```
如果单用这种方式写，打包的时候每个文件会把 antd 的所有模块都加载进去，参见： ant.design/docs/react/…

需要引入 babel-plugin-import 使每个模块按需加载，并在 webpack.config.js 里配置

loaders: [
    ...
    {
       text: /.(js|jsx)$/,
       include: paths.appSrc,
       loader: 'babel',
       query: {
           cacheDirectory: true,
           plugins: [["import", { libraryName: "antd", style: "css" }]]  // 这一句
       }
    },
    ...
]

优化后的结果，每个引入 antd 的文件会减小 0.5M

删除无用依赖

检查项目中没有用到的依赖包，删除它们

echart 图表懒加载

echart 图表可以使用 react-lazyload 进行懒加载 www.npmjs.com/package/rea…

import LazyLoad from 'react-lazyload';
// 在需要懒加载的元素外包裹
<LazyLoad height={300} offset={10}><!--元素--></LazyLoad>