Currently, I am working on a TypeScript project that utilizes node packages and webpack for compiling and bundling.
The folder structure of my project is as follows:
Scripts
App
Various Modules
Utility
Various Utility components and helpers
Index.tsx
My webpack configuration is outlined below:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
function srcPath(subdir) {
return path.join(__dirname, 'Scripts', subdir);
}
config = {
mode: 'development',
entry: './Scripts/Index.tsx',
output: {
filename: 'scripts/js/bundle.js',
path: __dirname + '/wwwroot'
},
// Enable sourcemaps for debugging webpack's output.
devtool: 'source-map',
resolve: {
// Resolve shortened import paths
alias: {
App: srcPath('App'),
Utility: srcPath('Utility')
},
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['.ts', '.tsx', '.js', '.json']
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader',
options: {
transpileOnly: true
}
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
]
},
optimization: {
minimize: false,
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'initial',
enforce: true
}
}
}
},
target: 'web'
};
module.exports = config;
As a result, two files are generated; bundle.js, which contains all the project code, and vendor.bundle.js, which comprises all compiled and bundled node packages.
At present, the compilation process takes around 9 seconds even in the early stages of the project. My concern lies in the potential increase in wait time as the project expands.
Is there a way to cache the vendor.bundle.js so that it does not need to be compiled and bundled each time webpack is run?