webpack2终极优化

除了紧缩文本代码外还可以：

用imagemin-webpack-plugin 紧缩图片
用webpack-spritesmith 归并雪碧图
对于支撑es6的js运行情况应用babili

优化开辟体验

优化开辟体验重要大年夜更快的构建和更便利的功能人手。

更快的构建

缩小文件搜刮范围

webpack的resolve.modules设备模块库(平日是指node_modules)地点的地位，在js里出现import 'redux'如许不是相对也不是绝对路径的写法时会去node_modules目次下找。然则默认的设备会采取向上递归搜刮的方法去寻找node_modules，但平日项目目次里只有一个node_modules在项目根目次，为了削减搜刮我们直接写明node_modules的全路径：

module.exports = { 
 
    resolve: { 
 
        modules: [path.resolve(__dirname, 'node_modules')] 
 
    } 
 
};

除此之外webpack设备loader时也可以缩小文件搜刮范围。

loader的test正则表达式也应当尽可能的简单，比如在你的项目里只有.js文件时就不要把test写成/\.jsx?$/
loader应用include射中只须要处理的文件，比如babel-loader的┞封两个设备:

只对项目目次下src目次里的代码进行babel编译

{ 
 
    test: /\.js$/, 
 
    loader: 'babel-loader', 
 
    include: path.resolve(__dirname, 'src') 
 
}

项目目次下的所有js都邑进行babel编译，包含宏大年夜的node_modules下的js

{ 
 
    test: /\.js$/, 
 
    loader: 'babel-loader' 
 
}

开启 babel-loader 缓存

module.exports = { 
 
    module: { 
 
         loaders: [{ 
 
                test: /\.js$/, 
 
                loader: 'babel-loader?cacheDirectory', 
 
         }] 
 
  } 
 
};

应用 alias

babel编译过程很耗时，好在babel-loader供给缓存编译结不雅选项，在重启webpack时不须要立异编译而是复竽暌姑缓存结不雅削减编译流程。babel-loader缓存机制默认是封闭的，打开的设备如下：

resolve.alias 设备路径映射。

宣布到npm的库大年夜多半都包含两个目次，一个是放着cmd模块化的lib目次，一个是把所有文件合成一个文件的dist目次，多半的人口文件是指向lib琅绫擎下的。

默认情况下webpack会去读lib目次下的人口文件再去递归加载其它依附的文件这个过程很耗时，alias设备可以让webpack直接应用dist目次的┞符体文件削减文件递归解析。设备如下：

module.exports = { 
 
  resolve: { 
 
    alias: { 
 
      'moment': 'moment/min/moment.min.js', 	
			 3/6   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　CSS进阶：试试酷炫的3D视角
写这篇文┞仿的启事是因为看到了这个页面：https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1(移动端页面，应用模仿器不雅看)控制 control 层，进入到圆柱画面内应用 CSS3 完成的 3D >>>详细阅读


本文标题：webpack2终极优化
地址：http://www.17bianji.com/lsqh/36159.html
 1/2    1