web优化 之 拾遗

本文会持续更新 欢迎提出宝贵建议; Demo的完整工程代码, 参考dva-cdn

目录

• CDN

• noParse

• happypack

CDN

dva new dva-cdn

npm run build

cat dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dva Demo</title>
  <link rel="stylesheet" href="/index.css" />
<link href="/index.css" rel="stylesheet"></head>
<body>
  <div id="root"></div>
<script type="text/javascript" src="/index.js"></script></body>
</html>

vim .roadhogrc

{
  "entry": "src/index.js",
  "publicPath": "http://cdn.example.com/",
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime"
      ]
    },
    "production": {
      "extraBabelPlugins": [
        "transform-runtime"
      ]
    }
  }
}

npm run build

cat dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dva Demo</title>
  <link rel="stylesheet" href="/index.css" />
<link href="http://cdn.example.com/index.css" rel="stylesheet"></head>
<body>
  <div id="root"></div>
<script type="text/javascript" src="http://cdn.example.com/index.js"></script></body>
</html>

noParse

happypack

TODO

参考

• Webpack CONFIGURATION

• 打包后文件太大怎么办

• webpack2 终极优化

• 提高webpack的打包速度：happypack和dll打包

• https://github.com/pigcan/blog/issues/1

• happypack 原理解析

更多文章, 请支持我的个人博客