尼克陈·前端随想录

webpack拆包策略实践

按需加载使用import('xxx')

一般情况下路由都采取懒加载的方式

单独拆出框架依赖(如react+reactDom)vendor包

package注意固定依赖版本，然后cdn进行强缓存，这样首次访问后浏览器就会缓存下来，框架包是不会变的，就算业务代码改动也不会变，因为这是第三方依赖。如果这些第三方框架包打进index vendor里，这样业务代码改了index的hash变了，浏览器还要重新加载这部分框架代码。

设置webpack的externals

externals: {
      react: 'React',
      'react-dom': 'ReactDOM',
},

单独打出runtime包

runtime用作映射其他chunk文件，结合script-ext-html-webpack-plugin插件可将runtime文件内联进html文件，减少请求。

html-webpack-plugin模板

<html>
<head>
    <!-- 框架代码单独抽离 -->
    <script src="preact.umd.js"></script>
</head>
<body>
<div id="app"></div>
<!-- runtime的js代码体积小内联到html，减少请求，其他的通过http请求 -->
<% for (var jsPath of htmlWebpackPlugin.files.js) { %>
    <% if(/runtime~.+\.js$/.test(jsPath)) { %>
        <script>
            <%= compilation.assets[jsPath].source() %>
        </script>
    <% } else { %>
        <script src="<%= jsPath %>"></script>
    <% } %>
<% } %>
</body>
</html>

使用tree shaking

注意使用esm模块模式导入包，不然做不了tree shaking

css单独抽取出来

使用css-extract插件把css单独抽取出来