webpack配置优化

1.使用alias简化路径

alias: {

   'vue$': 'vue/dist/vue.esm.js',

   '@': resolve('src')

}

2.overlay界面弹出编译错误

devServer: {

    overlay: {

        errors: true,

        warnings: true

    }

}

3.import语句指定chunkName

webpack2用import来代替require.ensure，其无法直接指定chunkName，可以使用注释的方式指定

import(/* webpackChunkName: "my-chunk-name" */ 'module');

4.Tree-shaking

只打包引用的方法，模块的为引用方法不被打包

什么是 tree shaking，即 webpack 在打包的过程中会将没用的代码进行清除(dead code)。一般 dead code 具有一下的特征：

1. 代码不会被执行，不可到达
2. 代码执行的结果不会被用到
3. 代码只会影响死变量（只写不读）

Tree shaking 生效必要条件

1. 模块引入要基于 ES6 模块机制，不能使用 commonjs 规范，因为 es6 模块的依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，然后清除没用的代码。而 commonjs 的依赖关系是要到运行时候才能确定下来的。

2. 开启 UglifyJsPlugin 这个插件对代码进行压缩

5.Scope Hoisting

webpack以前使用独立的函数包装一个个模块文件，webpack3可以将所有模块连接到一个闭包里面，放入一个函数，执行速度更快，体积也会更小

scope hoisting，顾名思义就是将模块的作用域提升，在 webpack 中不能将所有所有的模块直接放在同一个作用域下，有以下几个原因：

1. 按需加载的模块
2. 使用 commonjs 规范的模块
3. 被多 entry 共享的模块

想要webpack3开启Scope Hoisting，必须在 plugins 中添加 ModuleConcatenationPlugin

6.不用使用DllPlugin插件

7.内联少量的css，减少请求

plugins: [

  new StyleExtHtmlWebpackPlugin({

    minify: true

  })

]

8.preload插件优化请求时间

plugins: [

  new PreloadWebpackPlugin({

    rel: 'preload',

    as: 'script',

    include: 'all'

  })

]

9.UglifyJsPlugin配置优化

new UglifyJsPlugin({

    // 最紧凑的输出

    beautify: false,

    // 删除所有的注释

    comments: false,

    compress: {

      // 在UglifyJs删除没有用到的代码时不输出警告

      warnings: false,

      // 删除所有的 `console` 语句

      // 还可以兼容ie浏览器

      drop_console: true,

      // 内嵌定义了但是只用到一次的变量

      collapse_vars: true,

      // 提取出出现多次但是没有定义成变量去引用的静态值

      reduce_vars: true,

    }

})

10.引用某个文件夹中的所有文件(webpack1有效，webpack2以上版本未知)

如果你希望达到如下的效果:

require('./behaviors/*') /* Doesn't work! */

你需要使用require.context:

//出处 http://stackoverflow.com/a/30652110/873870

function requireAll (r) { r.keys().forEach(r) }

requireAll(require.context('./behaviors/', true, /\.js$/))s

各种require引用用法，参考此文

参考：https://juejin.im/post/59b9d2336fb9a00a636a3158
http://web.jobbole.com/93676/

巴特西

webpack配置优化

最新文章

热门文章