問題の説明：プロジェクトが使用する必要がありますvue-cli組み込まれて単一ページのアプリケーションを。ページを見てプラットフォームおよびユーザにプロジェクト管理は、ユーザーが閲覧ページは非常に単純なページであるが、ローディング・プロセス中に、しかし、全体のアプリケーションのパッケージ化コードがロードされ、そして応答及び経験の影響を秤量します。私が欲しい効果は、ページビューをロードするためにのみ、コード・ページを参照してくださいすることですコード管理システムなので、次の方法を共有するために、ここで、複数ページのアプリケーションに変換するために続行する単一ページのアプリケーションが含まれていません。
1、変換ファイルのディレクトリ
変換前：
変換：
assets：ここでは変わらず、まだ公共の静的リソースファイルを配置します。components：ここではVUEストアすべてのアプリケーションコンポーネント。pages：どこで私たちのマルチページを保存するには、例えば、私は管理システムページ入れindex、中ビューページview中央を。
ページファイル：
各ページのファイルが含まれている必要がありますhtml/ js/ vueページは、ルート、状態管理が含まれている場合、インタフェース要求はまた、このディレクトリに配置され、ファイルのエントリを。
2、パッケージ構成ファイルを変更します
私たちの最終的なパッケージファイルで、次の2つがあります見ることができますhtml分離されているリソースを含むが、。これは変更することによって行われるwebpack変換の構成。この方法はまた、オンライン比較法で使用されている推奨
HTML分離を：
リソースの分離：
2.1ビルド - > utils.js変更
変更しbuildたフォルダをutils.js、直接コードを後でコピーすることができ、次の。
var glob = require('glob');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var PAGE_PATH = path.resolve(__dirname, '../src/pages');
var merge = require('webpack-merge');
// 这段代码的意思是根据我们`pages`下的文件夹定义webpack的入口：
exports.entries = function () {
var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
var map = {}
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
map[filename] = filePath
})
return map
}
// 这段代码是将生成的html，加载对应的资源文件
exports.htmlPlugin = function () {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
let conf = {
// 模板来源
template: filePath,
// 文件名称
filename: filename + '.html',
// 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
chunks: ['manifest', 'vendor', filename],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}2.2修正入り口エントリ
- オープンは
build->webpack.base.conf.js、置き換えentryとしてutils新しいですentries：
2.3 HTMLプラグインを変更します
- オープンは
build->webpack.prod.conf.js、最初に元の設定を削除します。
その後、ちょうどで私たちを置くutilsと、新しい設定で：
3、ページを作成する方法
それは〜書かれたページの私の成功の練習を貼り付けるために、いくつかの登山ピットを減らす：上記の方法は、オンラインのさまざまな導入が、実装の過程で、または問題が発生していますview.html。
view.vue：
view.js：
[OK]を、この時間は、npm run buildそれが直接対応して、それを入力することにより、私たちが望むファイル、およびアクセスをパッケージ化することができhtml、管理が記述せずに、家であれば、index.htmlそのようなローカルアクセスレビューページなど、：
4、さらなる最適化
今回は、問題を発見し、そのページが状態管理を導入することなく、非常に簡単です私の見解で、UIフレームワークをルーティングするが、我々はWebPACKの共通コンポーネントのこれらのサードパーティVUEは、総会およびファイル内render.jsにパッケージされていることを知っています私たちの読み込み速度に影響を与えます。ここで私は、比較的大型のサードパーティ製のライブラリが使用する午前cdn半分読み込み速度、および圧縮されたJSコードであることが証明され、負荷に方法もたくさん小さいです-