常用webpack优化的方法

1. webpack简介

webpack 是一个模块打包器。webpack的主要目标是将 JavaScript 文件打包在一起，
打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)
或包裹(package)任何资源(resource or asset)。

在日常开发工作中，我们除了会使用webpack以及会编写它的配置文件之外，我们还需要了解一些关于webpack性能优化的方法，这样在实际工作就能够如虎添翼，增强自身的竞争力。

2. 浅谈webpack打包的原理

1. webpack打包之后的文件

1. 在打包后的文件中我们去看是一个自执行函数
2. 参数是通过对象形式去传递的
    key:文件路径  value:是一个函数执行当前文件
    eval 执行字符串代码
    由多个相互依赖的文件，最终打包成一个文件
3. 通过__webpack_require__ 通过递归的方式不停调用自己 最终形成一个文件

3. webpack打包优化

我认为有以下几方面：

1. 自带的优化
    tree-sharking :依赖关系的解析-->不用的代码不打包(注意：生产环境才会有效)
    scope-hoisting :作用域提升（变量直接可以取到的结果不会打包到代码中）
2. 自己写的优化
    速度
      happypack:多线程打包（注意:体积比较小打包的时候 比较慢）
    体积
      moment:时间插件引入很多语言包不需要的
           Igno rePlugin就会把不需要的语言包删掉

    html cdn 地址 jquery
    npm i jquery
    这些文件打包的时候打包到压缩文件中体积爆炸
    externals:{//不打包jQuery
        'jquery':'$'
    }
    modules:{
        noParse:/jquery/,
        ...
    }
    优雅代码程序
    autoprefixer :加载前缀
    babel-loader :插件引入
    终极大招：动态链接库
        把一些提取出来的包：react/react-dom
        放到一个单独的文件打包，最后可以放到cdn上，速度更快了。