webpack的使用

预获取prefetch和预加载preload

• prefetch(预获取)：将来某些导航下可能需要的资源
• preload(预加载)：当前导航下可能需要资源

简单示例，有一个 HomePage 组件，其内部渲染一个 LoginButton 组件，然后在点击后按需加载 LoginModal 组件。

import(/* webpackPrefetch: true */ 'LoginModal');

生成 <link rel="prefetch" href="login-modal-chunk.js"> 并追加到页面头部，浏览器在闲置时间预取 login-modal-chunk.js 文件。
与 prefetch 指令相比，preload 指令有许多不同之处：

preload的示例：
有一个Component，依赖一个大library第三方库，所以应该将其分离到独立的chunk中。假设有个图表组件ChartComponent组件，需要依赖体积巨大的ChartingLibrary库。会在渲染是显示一个LoadingIndicator（进度条）组件，然后立即按需导入ChartingLibrary。

import(/* webpackPreload:true */ 'ChartingLibrary');

页面加载ChartComponent时，在请求ChartComponent.js的同时，还会通过 请求charting-library-chunk。
不正确使用webpackPreload会有损性能，因为会同时加载js

通过插件设置文件cdn

html-webpack-plugin设置

首先设置cdn的配置文件

exports.externalConfig = [
  cdn:{
      css: ["https://cdn.jsdelivr.net/npm/vant@1.5/lib/index.css"],
    js: [
      "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js",
      "https://unpkg.com/vuex",
      "https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js",
      "https://cdn.jsdelivr.net/npm/vant@1.5/lib/vant.min.js",
      "https://unpkg.com/axios/dist/axios.min.js",
    ],
    wxjs: [
      "https://res.wx.qq.com/open/js/jweixin-1.2.0.js",
    ],
  }
];

HtmlWebpackPlugins插件导出cdn，配置cdn参数，改插件的作用是动态构建html页

new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true,
 cdnConfig: externalConfig, // cdn配置
 onlyCss: true,
}),

html-webpack-externals-plugin设置

基础库不打包，直接CDN引入
开发时，有时候需要引入一些基础库，如react开发时，每个组件都需要引入react和react-dom，打包时这两个基础库体积较大，导致构建出来的包提交变大，将react和react-dom在html中用CDN引入

// wepack.config.js
// 基础库不打包，直接CDN引入
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
module.exports = {
    new HtmlWebpackExternalsPlugin({
        externals: [
            {
                module: 'react',
                entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
                global: 'React'
            },
            {
                module: 'react-dom',
                entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
                global: 'ReactDOM'
            }
        ]
    })
};

编译后在html中使用

<script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react.min.js"></script>
<script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react-dom.min.js"></script>

外部扩展-Externals

该配置提供一个直接通过script脚本引入CDN资源，而不是打包。防止将某些import的包打包到bundle中。

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

然后设置webpack.config.js

module.exports = {
  externals: {
    jquery: 'jQuery',
    lodash : {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_' // 指向全局变量
    }
  }
};

然后就可以直接在项目使用jquery，可以剥离那些不需要改动的第三方依赖模块。

import $ from 'jquery';
$('.my-element').animate(/* ... */);