prefetch

来源:4-8 打包分析,Preloading, Prefetching

qq_南朝的裁缝_03903772

2019-08-25

图片描述

"scripts": {
    "dev-build": " webpack --profile --json > stats.json ./build/webpack.dev.js",
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  },
function handleClick(params) {
    const element = document.createElement('div')
    element.innerHTML = "chen yun"
    document.body.appendChild(element);
}

export default handleClick
document.addEventListener('click', () => {
    import(/* webpackPrefetch: true */ './click.js').then( ({default: _}) => {
        _()
    } )
})



const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [{
                test: /\.(jpg| png| gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 10240
                    }
                }
            },
            {
                test: /\.(eot|ttf|svg|woff)$/,
                use: {
                    loader: 'file-loader'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2
                    }
                }, 'sass-loader', 'postcss-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin(),
        // new BundleAnalyzerPlugin()
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendors: false,
                default: false
            }
        }
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../dist')
    }
}

以上是我的代码,老师帮我看下为什么prefetch 没有效果呢?非要点击文档1.js 才加载

写回答

1回答

Dell

2019-08-27

因为不同浏览器对这个特性的支持还不是特别完善和准确。

0
1
qq_南朝的裁缝_03903772
非常感谢!Dell
2019-08-28
共1条回复

从基础到实战 手把手带你掌握新版Webpack4.0

知识点+项目实例+原理讲解 全方位解析Webpack4新版本

3627 学习 · 1291 问题

查看课程