Vueプロジェクト最適化戦略webpackは、開発モードとリリースモードに異なるパッケージの入り口を指定します

ここでいくつかの問題を見つけることができます：
1。依存項目がプロジェクト全体の非常に大きな割合を占めることを見ると、アクセス速度は比較的遅い

2.このjsファイルは非常に大きい

次のように構成できます。

プロジェクトのmain.jsの名前をmain-dev.jsに変更し、すべてのコードを選択して、レベルレベルのmain-prod.jsファイルを作成し、コードを貼り付けます。

このように、main-dev.jsはプロジェクト開発エントリとして使用され、main-prod.jsはプロジェクトリリースエントリとして使用されます。vue.config.js構成ファイルを設定しましょう。

const {
    
     runInContext } = require("lodash")

module.exports = {
    
    
  chainWebpack: config => {
    
    
    // 如果当前环境是production
    config.when(process.env.NODE_ENV === 'production', config => {
    
    
      // 通过entry方法找到app的入口文件,清空入口文件,把指定的production环境的入口文件main-prod.js添加进去
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 如果当前环境是development
    config.when(process.env.NODE_ENV === 'development', config => {
    
    
      // 通过entry方法找到app的入口文件,清空入口文件,把指定的development环境的入口文件main-dev.js添加进去
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

構成を保存し、プロジェクトディレクトリで実行します

vue-cli-service serve --mode development --dashboard

または、もっと簡単に言えば、vue CLIページに戻って、開発環境で再コンパイルします。

問題は見つかりません。

ビルドフェーズで問題がないかどうかを確認するには、次のコマンドを実行します。

 vue-cli-service build --mode production --target app --dashboard

または、vueCLIページで直接実行します。

問題はありません。