webpack优化之路

1.别名alia

1
2
3
4
5

'react': (0, join)(__dirname, './node_modules/react/dist/react.min.js'),

resolve: {
    alias: alias,
},

2.css-loader < 0.15.0

1

"css-loader": "^0.14.1",

3.移除css-loader的sourcemap

这一步暂时没多大效果，继续下面的步骤

4.外部引入模块

1
2
3
4
5
6
7
8
9
10
11

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'reactUpdate': 'ReactUpdate',
    'antd': 'antd',
    "jquery": "jQuery",
    'AMap': 'window.AMap',
    'moment': 'moment',
    'react-dnd': 'ReactDnD',
    'react-router': 'ReactRouter'
},

CSS 预处理器技术已经非常的成熟，而且也涌现出了越来越多的 CSS 的预处理器框架。本文介绍的是使用最为普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。
来简单介绍下什么是 CSS 预处理器，CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
接下来将会从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操作符等方面分别对这三个框架进行比较介绍。

语法
在使用 CSS 预处理器之前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。
首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。

关于模块化，最直接的表现就是我们写的 require 和 import 关键字，如果查阅相关资料，就一定会遇到 CommonJS 、CMD AMD 这些名词，以及 RequireJS、SeaJS 等陌生框架。比如 SeaJS 的官网 这样描述自己: “简单友好的模块定义规范，Sea.js 遵循 CMD 规范。自然直观的代码组织方式，依赖的自动加载……” 　

什么是ES6？

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。

ECMAScript和JavaScript到底是什么关系？很多初学者会感到困惑，简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。

1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。