javascript - vue webpack mengembang luar biasa selepas pembungkusan

Question

Saya membuat demo menggunakan Vue Keseluruhan laman web ini hanya 300 baris Ini adalah pengenalan dalam main.js. ? ? Hanya satu halaman untuk diselesaikan! Walaupun pakej yang diperkenalkan begitu besar, elemen masih hanya memperkenalkan beberapa komponen. Adakah terdapat sebarang kaedah pengoptimuman?

ringa_lee · Answer

elemen vue vue-router vuex
Saiz ini agak biasa

ringa_lee · Answer

Anda perlu memasukkan modul yang diimport daripada node_modules, jika tidak, perkara ini akan muncul di luar udara. .
Anda tidak memasukkan elemen-ui, vue dan axios

为情所困 · Answer

Apabila anda membungkus, semua pakej yang anda bergantung akan dimampatkan Jika anda tidak mahu vendor menjadi begitu besar, anda boleh memperkenalkan CDN langkah demi langkah

Pilihan 1: Pilihan luaran ialah apa yang saya katakan tentang memperkenalkan CDN Adalah lebih baik untuk memperkenalkannya melalui pengedaran.

// webpack.prod.config.js
// 多余代码省略
module.exports = {
    externals: {
        'vue': 'window.Vue',
        'vuex': 'window.Vuex',
        'vue-router': 'window.VueRouter'
        ...
    }
}

// 配置externals之后，webpack不会把配置项中的代码打包进去，别忘了需要在外部引入cdn上的js文件
// html

    
    ......

Pilihan 2: webpack.DLLplugin

webpack.dll.config.js:

// webpack.dll.config.js

// 需要打包到一起的js文件
const vendors = [
    'vue',
    'vuex',
    'vue-router',
    'axios',
    'moment',
    'vue-echarts'
];

module.exports = {
    // 也可以设置多个入口，多个vendor，就可以生成多个bundle
    entry: {
        vendor: vendors
    },

    // 输出文件的名称和路径
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, '..', 'static'),
        library: '[name]_[chunkhash]',
    },

    plugins: [
        // 这时候打包需要设置环境为production，因为像vue之类在
        // dev环境下会比prod环境多一些信息，在生产环境如果打包的是dev代码，
        // vue也会给出警告
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.DllPlugin({
            path: path.join(__dirname, '..', 'static', '[name]-manifest.json'),
            name: '[name]_[chunkhash]',
            context: __dirname
        }),
        
        // 压缩
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),

        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
}

Saya belum meneliti yang kedua - -

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Pilihan 1: Pilihan luaran ialah apa yang saya katakan tentang memperkenalkan CDN Adalah lebih baik untuk memperkenalkannya melalui pengedaran.

Pilihan 2: webpack.DLLplugin